如何在Cordova/PhoneGap的InAppBrowser中检测navigator.onLine状态

我完全懂你的困扰——断网后用户点链接弹出系统默认的错误提示页，体验确实拉胯。你试过的navigator.onLine其实在WebView环境里检测精度有限，而且单纯靠它还不够，得结合Cordova原生的网络检测能力，再加上拦截InAppBrowser的链接请求来处理。

下面是具体的解决方案：

第一步：安装Cordova网络信息插件 #

先用上官方的Network Information插件，它比原生的navigator.onLine更适配移动设备，网络状态检测更可靠：

cordova plugin add cordova-plugin-network-information

第二步：监听InAppBrowser的链接请求并拦截 #

当你打开InAppBrowser时，要监听它的loadstart事件——这个事件会在页面发起新链接请求时触发。同时用插件提供的navigator.connection.type来判断当前网络状态：

// 打开目标网站的InAppBrowser
const browser = cordova.InAppBrowser.open('https://your-target-site.com', '_blank', 'location=yes');

// 监听每次链接加载开始的事件
browser.addEventListener('loadstart', function(event) {
    // 用插件获取当前网络状态
    const networkState = navigator.connection.type;
    // 定义断网状态的枚举值
    const offlineStates = [Connection.NONE, Connection.UNKNOWN];
    
    if (offlineStates.includes(networkState)) {
        // 断网状态下，阻止默认加载行为
        browser.stop();
        // 显示自定义提示——这里用注入JS修改页面内容的方式，也可以加载本地离线页
        browser.executeScript({ code: `
            document.body.innerHTML = '<div style="text-align:center; margin-top:50px;"><h2>网络连接已断开</h2><p>请检查你的网络设置后再尝试</p></div>';
        `});
        // 如果你有提前准备的本地离线提示页，也可以直接加载：
        // browser.loadUrl('offline.html');
    }
});

第三步：拦截页面内的JS跳转（可选但更全面） #

有些页面的跳转是通过JS触发的，loadstart可能覆盖不到，这时候可以注入一段JS到InAppBrowser的页面里，监听所有<a>标签的点击事件，提前做网络检测：

// 页面加载完成后注入拦截脚本
browser.addEventListener('loadstop', function() {
    browser.executeScript({ code: `
        // 监听全局点击事件，捕获a标签点击
        document.addEventListener('click', function(e) {
            const targetLink = e.target.closest('a');
            if (targetLink && targetLink.href) {
                e.preventDefault(); // 先阻止默认跳转
                // 调用Cordova的网络检测API（注入的JS可以通过cordova对象调用原生能力）
                cordova.exec(function(networkState) {
                    const offlineStates = ['none', 'unknown'];
                    if (offlineStates.includes(networkState)) {
                        alert('网络已断开，请检查连接后重试');
                    } else {
                        // 联网状态下正常跳转
                        window.location.href = targetLink.href;
                    }
                }, null, 'NetworkStatus', 'getConnectionInfo', []);
            }
        });
    `});
});

补充注意事项 #

• navigator.connection.type的可选值包括：Connection.WIFI、Connection.CELL、Connection.NONE、Connection.UNKNOWN，你可以根据业务需求调整断网判断逻辑。
• 记得在config.xml中配置必要的网络权限，确保插件正常工作：

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />

这样处理后，用户断网时点击任何链接都不会弹出系统默认错误页，而是显示你自定义的提示，体验会顺畅很多。

内容的提问来源于stack exchange，提问作者love-for-coding