Cordova - InAppBrowser

Cordova - InAppBrowser

cordova-plugin-inappbrowser 插件提供了一个可以在 Cordova 应用内部打开的网页浏览器视图。这对于显示外部网页内容、认证流程或帮助页面非常有用，无需强制用户离开应用并打开一个独立的浏览器。

步骤 1 - 安装插件

确保插件已添加到您的项目中。打开终端（terminal）或命令提示符（command prompt）并运行：

cordova plugin add cordova-plugin-inappbrowser

步骤 2 - 添加按钮（示例 UI）

在您的 index.html 文件中，您可以添加一个按钮来触发打开 InAppBrowser。

<!-- 在 index.html 中 -->
<button id="openBrowserButton">Open External Link</button>

步骤 3 - 添加事件监听器

在您的 JavaScript 文件（例如 index.js）中，为按钮添加一个事件监听器（event listener），确保它在 deviceready 事件之后设置。

// 在 index.js 中，'deviceready' 之后
document.addEventListener('deviceready', () => {
    document.getElementById("openBrowserButton").addEventListener("click", openExternalLink);
}, false);}

步骤 4 - 实现 openExternalLink 函数

此函数将使用 cordova.InAppBrowser.open() 方法来启动浏览器视图。open 方法返回一个指向 InAppBrowser 窗口的引用（ref），可以使用它来控制窗口并监听事件。

function openExternalLink() {
    const url = 'https://cordova.apache.org';
    const target = '_blank'; // '_blank' 在 InAppBrowser 中打开，'_system' 在系统浏览器中打开
    const options = 'location=yes,clearcache=yes,toolbar=yes'; // 逗号分隔的选项字符串

    // 打开 InAppBrowser
    const ref = cordova.InAppBrowser.open(url, target, options);

    // 为 InAppBrowser 实例添加事件监听器
    ref.addEventListener('loadstart', loadstartCallback);
    ref.addEventListener('loadstop', loadstopCallback);
    ref.addEventListener('loaderror', loaderrorCallback);
    ref.addEventListener('exit', exitCallback);

    function loadstartCallback(event) {
        console.log('InAppBrowser: Loading started: ' + event.url);
        // 您可以在此处在应用中显示加载指示器
    }

    function loadstopCallback(event) {
        console.log('InAppBrowser: Loading finished: ' + event.url);
        // 页面加载完成，隐藏加载指示器
        // 示例：在页面加载后注入 JavaScript
        // ref.executeScript({ code: "alert('Page loaded: ' + document.title);" });
    }

    function loaderrorCallback(error) {
        console.error('InAppBrowser: Loading error: ' + error.message);
        // 处理加载错误，例如向用户显示错误消息
        alert('Error loading page: ' + error.message);
    }

    function exitCallback() {
        console.log('InAppBrowser: Browser is closed.');
        // 在浏览器关闭后进行清理或执行操作
        // 如果 'ref' 长期存储，请不要忘记移除事件监听器
        // ref.removeEventListener('loadstart', loadstartCallback);
        // ref.removeEventListener('loadstop', loadstopCallback);
        // ref.removeEventListener('loaderror', loaderrorCallback);
        // ref.removeEventListener('exit', exitCallback);
    }
}

当您点击“Open External Link”按钮时，InAppBrowser 将打开并加载 https://cordova.apache.org。控制台（console）将输出 loadstart 和 loadstop 事件的消息。如果发生错误或关闭 InAppBrowser 时，相应的 loaderror 或 exit 事件将触发。

例如，控制台输出可能显示：

InAppBrowser: Loading started: https://cordova.apache.org/
InAppBrowser: Loading finished: https://cordova.apache.org/

关闭时：

InAppBrowser: Browser is closed.

InAppBrowser 选项（Options）

cordova.InAppBrowser.open(url, target, options) 中的 options 参数是一个逗号分隔的字符串。常用选项包括：

选项 (Option)	描述 (Description)	值 (默认值) (Values (Default))
location	显示地址栏（URL 地址栏）。	yes | no (yes)
hidden	以隐藏状态打开浏览器。稍后调用 show() 来显示它。	yes | no (no)
clearcache	打开前清除浏览器的 cookie 缓存。	yes | no (no)
clearsessioncache	打开前清除会话 cookie 缓存。	yes | no (no)
zoom	（仅限 Android）显示浏览器的缩放控件。	yes | no (yes)
hardwareback	（Android 和 Windows）使用硬件返回按钮导航 InAppBrowser 历史记录。如果为 ‘no’，则返回按钮关闭浏览器。	yes | no (yes)
mediaPlaybackRequiresUserAction	允许 HTML5 音频或视频自动播放或通过 JavaScript 播放。	yes | no (no, 通常对于 iOS 10+ 会更改为 yes)
shouldPauseOnSuspend	（仅限 Android）当应用发送到后台时暂停 InAppBrowser WebView。	yes | no (no)
closebuttoncaption	（仅限 iOS）设置“Done”按钮的标题。	String (Done)
disallowoverscroll	（仅限 iOS）禁用过度滚动回弹效果。	yes | no (no)
toolbar	（iOS 和 Android）显示带有后退/前进/完成按钮的工具栏。	yes | no (yes)
toolbarcolor	（iOS 和 Android）设置工具栏的背景颜色（十六进制字符串，例如 #RRGGBB）。	Hex String
hidenavigationbuttons	（iOS 和 Android）隐藏工具栏上的导航（后退/前进）按钮（如果工具栏可见）。	yes | no (no)
closebuttoncolor	（iOS 和 Android）设置关闭按钮的颜色（十六进制字符串）。	Hex String
lefttoright	（仅限 Windows）设置 InAppBrowser 从左到右或从右到左显示。	yes | no (no)
hidespinner	（仅限 iOS）当发生 loadstart 和 loadstop 事件时隐藏加载指示器。	yes | no (no)

通过编程控制 InAppBrowser

从 cordova.InAppBrowser.open() 获取的 ref 变量允许进一步交互：

注入 JavaScript 的示例：

ref.addEventListener('loadstop', function(event) {
    if (event.url.includes('cordova.apache.org')) {
        ref.executeScript(
            { code: "document.body.style.backgroundColor = 'lightblue';" },
            function(values) {
                console.log('Script executed, returned: ' + values);
            }
        );
    }
});

如果 ref 对象超出了其活动使用的范围，请务必记住移除事件监听器，以防止内存泄漏（memory leaks），尤其是在您随时间打开多个 InAppBrowser 实例的情况下。