Phonegap Build加载网页后onResume/onPause事件无法触发问题

嘿，这个问题我之前也碰到过！核心原因其实很简单：当你直接用WebView加载完整的外部网页时，原来包含Cordova运行环境的初始页面被完全替换了——新的外部网页里没有引入Cordova.js，也没有Cordova的上下文，自然那些依赖Cordova的pause和resume事件就触发不了了。而不加载网页时，页面还在原来的Cordova环境里，所以事件正常工作。

下面给你两个可行的解决方案，根据你的场景选就行：

方案1：如果你能控制外部网页的代码 #

如果这个外部网页是你自己开发的，那最简单的办法就是在网页里引入和Phonegap Build版本匹配的Cordova.js，然后重新绑定事件：

// 外部网页的代码
document.addEventListener('deviceready', function() {
    // 重新绑定pause/resume事件
    document.addEventListener("resume", onResume, false);
    document.addEventListener("pause", onPause, false);
});

function onResume() {
    console.log("网页从后台恢复啦");
    // 这里写你的业务逻辑
}

function onPause() {
    console.log("网页进入后台了");
    // 这里写你的业务逻辑
}

注意：Cordova.js的版本一定要和你Phonegap Build项目使用的版本一致，不然可能会出现兼容性问题。

方案2：用InAppBrowser插件（推荐给无法控制外部网页的场景） #

如果外部网页不是你能修改的，那强烈建议用Cordova的InAppBrowser插件来打开网页。这个插件会在独立的WebView中打开外部页面，不会替换原来的Cordova上下文，这样主应用的pause和resume事件就能正常触发了，还能监听InAppBrowser自身的状态。

步骤1：在config.xml中添加插件 #

<plugin name="cordova-plugin-inappbrowser" spec="^5.0.0" />

（版本号可以根据实际需求调整，选最新稳定版就行）

步骤2：修改主页面代码，用InAppBrowser打开网页 #

function onBodyLoad() {
    document.addEventListener('deviceready', onDeviceReady, false);
}

function onDeviceReady() {
    // 保留主应用的pause/resume事件监听
    document.addEventListener("resume", onResume, false);
    document.addEventListener("pause", onPause, false);

    // 用InAppBrowser打开外部网页，_blank表示在新的WebView打开
    const externalBrowser = window.open('https://你的外部网页地址', '_blank', 'location=no');
    
    // 可选：监听InAppBrowser的关闭事件
    externalBrowser.addEventListener('exit', function() {
        console.log("外部网页窗口已关闭");
        // 这里可以做一些清理工作
    });
}

function onResume() {
    console.log("应用从后台恢复");
    // 主应用的恢复逻辑
}

function onPause() {
    console.log("应用进入后台");
    // 主应用的暂停逻辑
}

这里要注意：别用_self作为打开目标，那样还是会替换当前WebView的上下文，导致Cordova环境丢失。_blank才是正确的选择。

内容的提问来源于stack exchange，提问作者Claes Gustavsson