Cordova InAppBrowser 插件

我们可以将 **InAppBrowser** 定义为一个原生的 Cordova 插件，主要用于为任何混合移动应用程序添加一个应用内浏览器。通过使用 InAppBrowser，我们可以从 Cordova 应用程序中打开外部链接。它可以轻松地在 Cordova 应用内加载网页。简单来说，我们可以说这个插件会在你的 Cordova 应用中加载一个子浏览器，并加载一个网页或第三方（不受信任的）内容。但请注意，我们无法从此插件访问 **Camera、Battery Status** 等 Cordova API。为了方便用户，该插件提供了一些默认的 UI 控件，如 **back、forward、done**。

它是 Cordova 应用程序中的一个网页浏览器视图，可以通过调用 **cordova.InAppBrowser.open()** 方法来显示。

是什么让 InAppBrowser 很有用？

我们可以通过使用 **InAppBrowser 插件**执行各种任务，如下所示：

• 加载支付网关页面
• 加载网页/第三方网站。
• 加载类似 Iframe。

window.open()

我们可以将 **cordova.InAppBrowser.open()** 方法定义为 **window.open()** 方法的直接替代品。这个 **InAppBrowser** 窗口可以通过替换 **window.open()** 方法来用于现有的 **window.open()** 调用。

**InAppBrowser** 方法会在你的 Cordova 应用中加载一个子浏览器，但此方法无法访问 Camera、Battery Status 等 Cordova API。因此，推荐用户使用此方法加载第三方（不受信任的）内容。

为了方便用户，该插件提供了一些默认的 UI 控件，如 **back、forward、done**。

此插件会钩住 **window.open()** 方法以实现向后兼容。但是，在安装插件钩住方法时可能会遇到一些意外错误。在未来的版本中，**window.open** 的钩子将被移除，直到从插件中移除钩子为止。

delete window.open 上面的命令用于将调用还原回其默认原型。如果 **window.open** 存在于全局作用域中，然而，此插件在 **deviceready** 事件发生后才可用。

安装

下面的命令将在你的项目中安装 **InAppBrowser** 插件。

cordova plugin add cordova-plugin-inappbrowser

cordova.InAppBrowser.open

InAppBrowser.open 方法的主要任务是在新的 **InAppBrowser** 实例、系统浏览器和当前浏览器中打开一个 URL。

它支持各种平台，如 **Android、iOS、Windows、OSX、Browser**。

现在讨论上述术语

ref: 此 ref 变量用于在 target 设置为 '\_blank' 时提供 InAppBrowser 窗口的引用。

url: 顾名思义，此参数包含一个字符串值，定义网页的 URL。

target: 这是一个 **可选** 参数，包含一个字符串值。此方法定义了网页 URL 将加载的目标。target 参数的默认值设置为 **\_self.**

• \_self: 此值会在 Cordova WebView 中打开一个网页，前提是网页的 URL 在白名单中。否则，它将在 **InAppBrowser** 中打开网页。
• \_blank: 此值会在 InAppBrowser 中打开一个网页。
• \_system: 此值会在系统的 Web 浏览器中打开一个网页。

options: 这也是一个 **可选** 参数，包含 **InAppBrowser** 方法的各种选项。它包含一个字符串值，默认值设置为 **location=yes.**

在将此参数传递给函数之前，您应该首先检查它是否不包含任何空格。您还应该检查每个功能名称/值对是否用逗号分隔。功能名称不区分大小写。

以下是 **所有平台** 支持的选项

location: 此选项通过设置 **yes** 或 **no** 值来开启或关闭 InAppBrowser 的地址栏。

而在 **Android 平台** 上，支持各种附加选项，如下所示：

hidden: 此选项是必需的，通过将其值设置为 **yes** 来创建浏览器并加载网页。但此选项不会显示它。加载完成后，将触发 loadstop 事件来停止加载特定网页。其默认值设置为 **no** 以正常打开和加载 Web 浏览器。

beforeload: 这是一个用于修改在浏览器中加载的页面的事件。此选项可以接受三个值，即 **get、post、** 和 **yes**。通过设置此事件的 **get** 值，它仅拦截 **GET** 请求。**post** 值会在 **POST** 请求上停止，而 **yes** 值会停止 **GET** 和 **POST** 请求。

应该注意的是，POST 请求目前不受支持。如果我们将 **beforeload=post** 设置为 **post**，则会引发错误。

clearcache: 可以在打开新窗口之前清除浏览器的 cookie 缓存。要启用此选项，我们必须将其值设置为 **yes.**

clearsessioncache: 使用此选项，我们可以在打开新窗口之前清除会话 cookie 缓存。要启用此选项，我们必须将其值设置为 **yes**。

closebuttoncaption: 在此选项中，必须将一个字符串值设置为用于关闭按钮的标题，而不是 X。应该注意的是，您必须自己本地化此值。

closebuttoncolor: 使用此选项，我们可以将颜色设置为有效的十六进制颜色字符串。此选项可以更改默认的关闭按钮颜色。我们可以通过将 location 设置为 **yes** 来使用此选项。

footer: 在此选项中，为了在页脚显示一个类似于 **iOS** 平台的 **Done** 按钮的关闭按钮，我们必须将值设置为 **yes**。使用 **closebuttoncaption** 和 **closebuttoncolor** 设置属性，因为关闭按钮将与页眉相同。

footercolor: 此选项可以更改默认的页脚颜色或设置有效的十六进制颜色字符串。如果我们将 footer 设置为 **yes**，则启用此选项。

hardwareback: 此选项负责通过将值设置为 **yes** 来使用硬件返回按钮。硬件返回按钮用于导航到 **InAppBrowser** 历史记录的后退。如果没有前一页，InAppBrowser 将关闭。hardwareback 的默认值是 **yes.** 如果你想让返回按钮关闭 InAppBrowser，你必须将其值设置为 **no.**

hidenavigationbuttons: 我们可以通过将值设置为 **yes** 来隐藏地址栏上的导航按钮。此选项的默认值为 **no.**

hideurlbar: 此选项用于通过将值设置为 **yes** 来隐藏地址栏上的 URL 栏。此选项的默认值为 **no.**

navigationbuttoncolor: 此选项可以更改两个导航按钮的默认颜色或设置为有效的十六进制颜色字符串。为此，我们需要将 location 设置为 **yes**，并且不要将 **hidenavigationbuttons** 设置为 **yes**。

toolbarcolor: 此选项可以更改默认工具栏颜色或设置为有效的十六进制颜色字符串。为此，我们需要将 location 设置为 **yes.**

lefttoright: 在此选项中，通过将值设置为 **yes** 来交换导航按钮和关闭按钮的位置。特别是，导航按钮移到左边，关闭按钮移到右边。

zoom: 要显示 Android 浏览器按钮的缩放控件，我们必须将其值设置为 yes。如果你想隐藏它，你必须将其值设置为 **no.** 它的默认值是 **yes.**

mediaPlaybackRequiresUserAction: 为了防止 HTML5 音频或视频自动播放，我们必须使用此选项，将其值设置为 **yes.** 该选项的默认值为 **no.**

shouldPauseOnSuspend: 为了停止后台音频，此选项使 InAppBrowser WebView 与应用程序一起暂停或恢复。这可以通过将选项设置为 **yes** 来完成。

现在，是时候讨论 Windows 平台支持的其他选项了

hidden: 如果你想创建浏览器并加载页面，你可以通过将值设置为 **yes** 来使用此选项。但此选项不会显示它。加载完成后，会触发 loadstop 事件来停止加载。此选项的默认值设置为 **no** 以正常打开和加载浏览器。

hardwareback: 它的工作方式与 Android 平台相同。

此选项负责通过将值设置为 **yes** 来使用硬件返回按钮。硬件返回按钮用于导航到 **InAppBrowser** 历史记录的后退。如果没有前一页，InAppBrowser 将关闭。hardwareback 的默认值是 **yes.** 如果你想让返回按钮关闭 InAppBrowser，你必须将其值设置为 **no.**

fullscreen: 要创建没有边框的浏览器控件，我们可以通过将值设置为 **yes** 来使用 **fullscreen** 选项。应该注意的是，如果我们指定 location 的值为 **no**，用户将无法关闭 IAB 窗口。

方法

**InAppBrowser** 中有各种可用的方法，如下所示：

• addEventListener
• removeEventListener
• show
• hide
• close
• executeScript
• insertCSS

InAppBrowser.addEventListener

**InAppBrowser.addEventListener** 方法的主要任务是为事件添加一个监听器。但此方法仅在 target 设置为 **'\blank'** 时使用。此方法支持 Android、Windows、iOS、OSX、Browser 等各种平台。

语法

ref.addEventListener(eventname, callback);

ref 用于提供对 **InAppBrowser** 窗口的引用。

参数

eventname: 此参数包含一个字符串值，用于显示事件名称。下面讨论了一些事件：

• loadstart: 当 InAppBrowser 开始加载 URL 时，将触发此事件。
• loadstop: 当 InAppBrowser 完成加载 URL 时，将触发此事件。
• loaderror: 在加载 URL 时遇到错误时，将触发此事件。
• exit: 当 InAppBrowser 窗口关闭时，将触发此事件。
• beforeload: 当 InAppBrowser 决定是否加载 URL 时，将触发此事件。
• message: 当 InAppBrowser 收到消息时，将触发此事件。此消息是从 InAppBrowser WebView 中加载的特定页面发布的。

callback: 当事件触发时，将执行此函数。它作为参数传递给 **InAppBrowserEvent** 对象。

示例

InAppBrowser.removeEventListener

如果我们谈论此方法，它会从 InAppBrowser 中移除事件监听器。我们只能在 target 设置为 **'\blank'** 时使用此方法。此方法支持 Android、Windows、iOS、Browser 等各种平台。

语法

ref: **ref** 用于提供对 InAppBrowser 窗口的引用。

参数

eventname: 此参数包含字符串值以显示事件名称。

下面讨论了一些事件：

• loadstart: 当 InAppBrowser 开始加载 URL 时，将触发此事件。
• loadstop: 当 InAppBrowser 完成加载 URL 时，将触发此事件。
• loaderror: 在加载 URL 时遇到错误时，将触发此事件。
• exit: 当 InAppBrowser 窗口关闭时，将触发此事件。
• message: 当 InAppBrowser 收到消息时，将触发此事件。此消息是从 InAppBrowser WebView 中加载的页面发布的。

callback: 当事件触发时，将执行此函数。它作为参数传递给 **InAppBrowserEvent** 对象。

示例

InAppBrowser.close

使用此方法，我们可以关闭 **InAppBrowser** 的窗口。此方法用于关闭 **InAppBrowser** 的窗口。它支持 Android、Windows、iOS、Browser 等各种平台。

语法

ref: **ref** 用于提供对 InAppBrowser 窗口的引用。

示例

InAppBrowser.show

使用此方法，我们可以显示隐藏的 InAppBrowser 窗口。但如果 InAppBrowser 已经可见，此方法将不起作用。它支持 Android、Windows、iOS、Browser 等各种平台。

语法

ref: **ref** 用于提供对 InAppBrowser 窗口的引用。

示例

InAppBrowser.hide

如果你想隐藏 InAppBrowser 的窗口，你可以简单地使用 **InAppBrowser.hide** 方法。它支持 Windows、Android、iOS 等各种平台。

语法

ref: **ref** 用于提供对 InAppBrowser 窗口的引用。

示例

InAppBrowser.executeScript

如果你需要将 JavaScript 代码注入到 InAppBrowser 窗口中，你只需使用 **InAppBrowser.executeScript** 方法即可。但应该注意的是，只有当 target 设置为 **'\blank'** 时，此方法才可用。它支持 Windows、Android、iOS、Browser 等各种平台。

语法

• ref: **ref** 用于提供对 InAppBrowser 窗口的引用。
• injectDetails: 它主要指一个对象，该对象提供要运行的脚本的详细信息，并指定 **file** 或 **code**
  • file: 它用于注入脚本的 URL。
  • code: 它用于注入脚本的文本。
• callback: 在注入 JavaScript 代码后，将执行此方法。如果注入的脚本是 **code** 类型，则会用一个参数执行。

示例

InAppBrowser.insertCSS

使用 **InAppBrowser.insertCSS** 方法，我们可以简单地将 CSS 注入到 InAppBrowser 窗口中。但应该注意的是，只有当 target 设置为 **'\blank'** 时，此方法才可用。它支持 Windows、iOS、Android 等各种平台。

语法

• ref: **ref** 用于提供对 InAppBrowser 窗口的引用。
• injectDetails: 它主要指一个对象，该对象提供要运行的脚本的详细信息，并指定 **file** 或 **code**
  • file: 它用于注入脚本的 URL。
  • code: 它用于注入脚本的文本。
• callback: 在注入 CSS 后执行。

示例