如何在重定向本地HTML页面及Ajax成功后获取InAppBrowser关闭事件？

我来帮你搞定这个问题！核心难点在于：InAppBrowser加载的page2和主页面是两个独立的上下文环境，没法直接共享事件监听。我们需要结合跨页面消息通信和InAppBrowser的原生事件来实现需求——也就是让page2在Ajax成功后通知主页面，同时主页面监听InAppBrowser的关闭事件来处理后续逻辑。

步骤1：修改主页面（page1）代码 #

主页面要做三件事：打开InAppBrowser、监听它的关闭事件、接收来自page2的Ajax成功通知。

<input type="button" id="pay" value="PAY">
<script type="text/javascript">
$(document).ready(function() {
    $("#pay").click(function() {
        // 打开page2到InAppBrowser
        var ref = cordova.InAppBrowser.open("page2.html", "_blank", "location=yes");
        
        // 监听InAppBrowser的关闭事件
        ref.addEventListener('exit', function() {
            console.log('InAppBrowser已经关闭啦');
            // 这里写你关闭后要执行的逻辑，比如刷新订单状态、提示用户支付完成等
        });
        
        // 监听来自page2的消息（比如Ajax成功的通知）
        ref.addEventListener('message', function(event) {
            if (event.data === 'ajax_success') {
                console.log('收到page2的Ajax成功通知');
                // 可选：如果需要自动关闭InAppBrowser，就调用这行
                // ref.close();
            }
        });
    });
});
</script>

步骤2：修改page2的Ajax逻辑 #

page2在请求成功后，要给主页面发送消息，告知Ajax已经完成。这里要兼容iOS和Android的不同通信方式：

<script type="text/javascript">
$(document).ready(function() {
    // 你的Ajax请求示例
    $.ajax({
        url: '你的接口地址',
        method: 'POST',
        data: { /* 请求参数 */ },
        success: function(response) {
            console.log('Ajax请求成功！');
            
            // 给主页面发送消息，通知请求完成
            if (window.webkit && window.webkit.messageHandlers) {
                // iOS环境下的通信方式
                window.webkit.messageHandlers.cordova_iab.postMessage('ajax_success');
            } else {
                // Android环境下的通信方式
                window.parent.postMessage('ajax_success', '*');
            }
            
            // 可选：如果要自动关闭InAppBrowser，直接调用这个
            // window.close();
        },
        error: function(err) {
            console.error('Ajax请求失败了', err);
        }
    });
});
</script>

关键原理说明 #

• InAppBrowser的exit事件只能在主页面的InAppBrowser实例（也就是代码里的ref）上监听，因为这个实例是主页面创建的。
• page2运行在独立的WebView中，和主页面没有直接的变量/事件共享，所以必须用postMessage实现跨上下文通信，让主页面知道Ajax已经成功。
• 你可以选择两种流程：要么Ajax成功后通知主页面，让主页面主动关闭InAppBrowser；要么让用户手动关闭，主页面在exit事件里结合之前收到的Ajax成功信号来处理逻辑。

注意事项 #

• 确保已经正确安装InAppBrowser插件：cordova plugin add cordova-plugin-inappbrowser
• Android环境下，postMessage的目标源用*是简化处理，实际项目中可以指定主页面的具体域名，更安全。

内容的提问来源于stack exchange，提问作者K-Series