cordova-plugin-inappbrowser

Android Testsuite Chrome Testsuite iOS Testsuite Lint Test

您可以在應用程式中顯示有用的文章、影片和網路資源。使用者可以在不離開應用程式的情況下檢視網頁。

若要獲得一些想法,請查看本頁底部的範例或直接前往參考內容。

此外掛程式提供在呼叫 cordova.InAppBrowser.open() 時顯示的網頁瀏覽器檢視。

var ref = cordova.InAppBrowser.open('https://apache.org', '_blank', 'location=yes');

window.open

cordova.InAppBrowser.open() 函式定義為 window.open() 函式的直接替代品。現有的 window.open() 呼叫可以透過取代 window.open 來使用 InAppBrowser 視窗。

window.open = cordova.InAppBrowser.open;

如果您以這種方式變更瀏覽器的 window.open 函式,可能會產生意想不到的副作用 (尤其是在此外掛程式僅作為另一個外掛程式的相依性包含時)。

InAppBrowser 視窗的行為類似標準網頁瀏覽器,無法存取 Cordova API。因此,如果您需要載入第三方 (不受信任) 的內容,建議使用 InAppBrowser,而不是將其載入主要的 Cordova 網頁檢視中。InAppBrowser 不受白名單的約束,也不會在系統瀏覽器中開啟連結。

InAppBrowser 預設為使用者提供自己的 GUI 控制項 (上一步、下一步、完成)。

安裝

cordova plugin add cordova-plugin-inappbrowser

如果您希望應用程式中的所有頁面載入都透過 InAppBrowser,您可以簡單地在初始化期間掛鉤 window.open。例如

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    window.open = cordova.InAppBrowser.open;
}

偏好設定

config.xml

  • InAppBrowserStatusBarStyle [僅限 iOS]: (字串,選項 'lightcontent'、'darkcontent' 或 'default'。預設為 'default') 設定 iOS 的文字顏色樣式。'lightcontent' 適用於深色背景。'darkcontent' 僅適用於 iOS 13 及更新版本,適用於淺色背景。 ```xml

## cordova.InAppBrowser.open

Opens a URL in a new `InAppBrowser` instance, the current browser
instance, or the system browser.

    var ref = cordova.InAppBrowser.open(url, target, options);

- __ref__: Reference to the `InAppBrowser` window when the target is set to `'_blank'`. _(InAppBrowser)_

- __url__: The URL to load _(String)_. Call `encodeURI()` on this if the URL contains Unicode characters.

- __target__: The target in which to load the URL, an optional parameter that defaults to `_self`. _(String)_

    - `_self`: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the `InAppBrowser`.
    - `_blank`: Opens in the `InAppBrowser`.
    - `_system`: Opens in the system's web browser.

- __options__: Options for the `InAppBrowser`. Optional, defaulting to: `location=yes`. _(String)_

    The `options` string must not contain any blank space, and each feature's name/value pairs must be separated by a comma. Feature names are case insensitive.

    All platforms support:

    - __location__: Set to `yes` or `no` to turn the `InAppBrowser`'s location bar on or off.

    Android supports these additional options:

    - __hidden__: set to `yes` to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit or set to `no` (default) to have the browser open and load normally.
    - __beforeload__: set to enable the `beforeload` event to modify which pages are actually loaded in the browser. Accepted values are `get` to intercept only GET requests, `post` to intercept on POST requests or `yes` to intercept both GET & POST requests. Note that POST requests are not currently supported and will be ignored (if you set `beforeload=post` it will raise an error).
    - __clearcache__: set to `yes` to have the browser's cookie cache cleared before the new window is opened
    - __clearsessioncache__: set to `yes` to have the session cookie cache cleared before the new window is opened
    - __closebuttoncaption__: set to a string to use as the close button's caption instead of a X. Note that you need to localize this value yourself.
    - __closebuttoncolor__: set to a valid hex color string, for example: `#00ff00`, and it will change the
    close button color from default, regardless of being a text or default X. Only has effect if user has location set to `yes`.
    - __footer__: set to `yes` to show a close button in the footer similar to the iOS __Done__ button. 
    The close button will appear the same as for the header hence use __closebuttoncaption__ and __closebuttoncolor__ to set its properties.
    - __footercolor__: set to a valid hex color string, for example `#00ff00` or `#CC00ff00` (`#aarrggbb`) , and it will change the footer color from default.
    Only has effect if user has __footer__ set to `yes`.
    - __hardwareback__: set to `yes` to use the hardware back button to navigate backwards through the `InAppBrowser`'s history. If there is no previous page, the `InAppBrowser` will close.  The default value is `yes`, so you must set it to `no` if you want the back button to simply close the InAppBrowser.
    - __hidenavigationbuttons__: set to `yes` to hide the navigation buttons on the location toolbar, only has effect if user has location set to `yes`. The default value is `no`.
    - __hideurlbar__: set to `yes` to hide the url bar on the location toolbar, only has effect if user has location set to `yes`. The default value is `no`.
    - __navigationbuttoncolor__: set to a valid hex color string, for example: `#00ff00`, and it will change the color of both navigation buttons from default. Only has effect if user has location set to `yes` and not hidenavigationbuttons set to `yes`.
    - __toolbarcolor__: set to a valid hex color string, for example: `#00ff00`, and it will change the color the toolbar from default. Only has effect if user has location set to `yes`.
    - __lefttoright__: Set to `yes` to swap positions of the navigation buttons and the close button. Specifically, navigation buttons go to the right and close button to the left. Default value is `no`.
    - __zoom__: set to `yes` to show Android browser's zoom controls, set to `no` to hide them.  Default value is `yes`.
    - __mediaPlaybackRequiresUserAction__: Set to `yes` to prevent HTML5 audio or video from autoplaying (defaults to `no`).
    - __shouldPauseOnSuspend__: Set to `yes` to make InAppBrowser WebView to pause/resume with the app to stop background audio (this may be required to avoid Google Play issues like described in [CB-11013](https://issues.apache.org/jira/browse/CB-11013)).
    - __useWideViewPort__: Sets whether the WebView should enable support for the "viewport" HTML meta tag or should use a wide viewport. When the value of the setting is `no`, the layout width is always set to the width of the WebView control in device-independent (CSS) pixels. When the value is `yes` and the page contains the viewport meta tag, the value of the width specified in the tag is used. If the page does not contain the tag or does not provide a width, then a wide viewport will be used. (defaults to `yes`).
    - __fullscreen__: Sets whether the InappBrowser WebView is displayed fullscreen or not. In fullscreen mode, the status bar is hidden. Default value is `yes`.

    iOS supports these additional options:

    - __hidden__: set to `yes` to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit or set to `no` (default) to have the browser open and load normally.
    - __beforeload__: set to enable the `beforeload` event to modify which pages are actually loaded in the browser. Accepted values are `get` to intercept only GET requests, `post` to intercept on POST requests or `yes` to intercept both GET & POST requests. Note that POST requests are not currently supported and will be ignored (if you set `beforeload=post` it will raise an error).
    - __clearcache__: set to `yes` to have the browser's cookie cache cleared before the new window is opened
    - __clearsessioncache__: set to `yes` to have the session cookie cache cleared before the new window is opened. For WKWebView, requires iOS 11+ on target device.
    - __cleardata__: set to `yes` to have the browser's entire local storage cleared (cookies, HTML5 local storage, IndexedDB, etc.) before the new window is opened
    - __closebuttoncolor__: set as a valid hex color string, for example: `#00ff00`, to change from the default __Done__ button's color. Only applicable if toolbar is not disabled.
    - __closebuttoncaption__: set to a string to use as the __Done__ button's caption. Note that you need to localize this value yourself.
    - __disallowoverscroll__: Set to `yes` or `no` (default is `no`). Turns on/off the the bounce of the WKWebView's UIScrollView.
    - __hidenavigationbuttons__:  set to `yes` or `no` to turn the toolbar navigation buttons on or off (defaults to `no`). Only applicable if toolbar is not disabled.
    - __navigationbuttoncolor__:  set as a valid hex color string, for example: `#00ff00`, to change from the default color. Only applicable if navigation buttons are visible.
    - __toolbar__:  set to `yes` or `no` to turn the toolbar on or off for the InAppBrowser (defaults to `yes`)
    - __toolbarcolor__: set as a valid hex color string, for example: `#00ff00`, to change from the default color of the toolbar. Only applicable if toolbar is not disabled.
    - __toolbartranslucent__:  set to `yes` or `no` to make the toolbar translucent(semi-transparent)  (defaults to `yes`). Only applicable if toolbar is not disabled.
    - __lefttoright__: Set to `yes` to swap positions of the navigation buttons and the close button. Specifically, close button goes to the right and navigation buttons to the left.
    - __enableViewportScale__:  Set to `yes` or `no` to prevent viewport scaling through a meta tag (defaults to `no`).
    - __mediaPlaybackRequiresUserAction__: Set to `yes` to prevent HTML5 audio or video from autoplaying (defaults to `no`).
    - __allowInlineMediaPlayback__: Set to `yes` or `no` to allow in-line HTML5 media playback, displaying within the browser window rather than a device-specific playback interface. The HTML's `video` element must also include the `webkit-playsinline` attribute (defaults to `no`).
    - __presentationstyle__:  Set to `pagesheet`, `formsheet` or `fullscreen` to set the [presentation style](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle) (defaults to `fullscreen`).
    - __transitionstyle__: Set to `fliphorizontal`, `crossdissolve` or `coververtical` to set the [transition style](https://developer.apple.com/documentation/uikit/uimodaltransitionstyle) (defaults to `coververtical`).
    - __toolbarposition__: Set to `top` or `bottom` (default is `bottom`). Causes the toolbar to be at the top or bottom of the window.
    - __hidespinner__: Set to `yes` or `no` to change the visibility of the loading indicator (defaults to `no`).

    Windows supports these additional options:

    - __hidden__: set to `yes` to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit or set to `no` (default) to have the browser open and load normally.
    - __hardwareback__: works the same way as on Android platform.
    - __fullscreen__: set to `yes` to create the browser control without a border around it. Please note that if __location=no__ is also specified, there will be no control presented to user to close IAB window.


### Supported Platforms

- Android
- Browser
- iOS
- OSX
- Windows

### Example

    var ref = cordova.InAppBrowser.open('https://apache.org', '_blank', 'location=yes');
    var ref2 = cordova.InAppBrowser.open(encodeURI('http://ja.m.wikipedia.org/wiki/ハングル'), '_blank', 'location=yes');

### OSX Quirks

At the moment the only supported target in OSX is `_system`.

`_blank` and `_self` targets are not yet implemented and are ignored silently. Pull requests and patches to get these to work are greatly appreciated.

### iOS Quirks

Since the introduction of iPadOS 13, iPads try to adapt their content mode / user agent for the optimal browsing experience. This may result in iPads having their user agent set to Macintosh, making it hard to detect them as mobile devices using user agent string sniffing. You can change this with the `PreferredContentMode` preference in `config.xml`.

```xml
<preference name="PreferredContentMode" value="mobile" />

上述範例會強制使用者代理包含 iPad。另一個選項是使用值 desktop 將使用者代理變更為 Macintosh

瀏覽器怪癖

  • 外掛程式透過 iframe 實作,

  • 未實作導覽歷程記錄 (LocationBar 中的 上一步下一步 按鈕)。

InAppBrowser

當目標設定為 '_blank' 時,從呼叫 cordova.InAppBrowser.open 傳回的物件。

方法

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

InAppBrowser.addEventListener

為來自 InAppBrowser 的事件新增接聽程式。(僅在目標設定為 '_blank' 時可用)

ref.addEventListener(eventname, callback);
  • ref: InAppBrowser 視窗的參考 (InAppBrowser)

  • eventname: 要接聽的事件 (字串)

    • loadstart: 當 InAppBrowser 開始載入 URL 時觸發的事件。
    • loadstop: 當 InAppBrowser 完成載入 URL 時觸發的事件。
    • loaderror: 當 InAppBrowser 載入 URL 時發生錯誤時觸發的事件。
    • exit: 當 InAppBrowser 視窗關閉時觸發的事件。
    • beforeload: 當 InAppBrowser 決定是否要載入 URL 時觸發的事件 (僅在設定選項 beforeload 時)。
    • message: 當 InAppBrowser 收到從 InAppBrowser 網頁檢視中載入的頁面張貼的訊息時觸發的事件。
  • callback: 事件觸發時執行的函式。函式會將 InAppBrowserEvent 物件作為參數傳遞。

範例


var inAppBrowserRef;

function showHelp(url) {

    var target = "_blank";

    var options = "location=yes,hidden=yes,beforeload=yes";

    inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);

    inAppBrowserRef.addEventListener('loadstart', loadStartCallBack);

    inAppBrowserRef.addEventListener('loadstop', loadStopCallBack);

    inAppBrowserRef.addEventListener('loaderror', loadErrorCallBack);

    inAppBrowserRef.addEventListener('beforeload', beforeloadCallBack);

    inAppBrowserRef.addEventListener('message', messageCallBack);
}

function loadStartCallBack() {

    $('#status-message').text("loading please wait ...");

}

function loadStopCallBack() {

    if (inAppBrowserRef != undefined) {

        inAppBrowserRef.insertCSS({ code: "body{font-size: 25px;}" });

        inAppBrowserRef.executeScript({ code: "\
            var message = 'this is the message';\
            var messageObj = {my_message: message};\
            var stringifiedMessageObj = JSON.stringify(messageObj);\
            webkit.messageHandlers.cordova_iab.postMessage(stringifiedMessageObj);"
        });

        $('#status-message').text("");

        inAppBrowserRef.show();
    }

}

function loadErrorCallBack(params) {

    $('#status-message').text("");

    var scriptErrorMesssage =
       "alert('Sorry we cannot open that page. Message from the server is : "
       + params.message + "');"

    inAppBrowserRef.executeScript({ code: scriptErrorMesssage }, executeScriptCallBack);

    inAppBrowserRef.close();

    inAppBrowserRef = undefined;

}

function executeScriptCallBack(params) {

    if (params[0] == null) {

        $('#status-message').text(
           "Sorry we couldn't open that page. Message from the server is : '"
           + params.message + "'");
    }

}

function beforeloadCallBack(params, callback) {

    if (params.url.startsWith("http://www.example.com/")) {

        // Load this URL in the inAppBrowser.
        callback(params.url);
    } else {

        // The callback is not invoked, so the page will not be loaded.
        $('#status-message').text("This browser only opens pages on http://www.example.com/");
    }

}

function messageCallBack(params){
    $('#status-message').text("message received: "+params.data.my_message);
}

InAppBrowserEvent 屬性

  • type: 事件名稱,可以是 loadstartloadstoploaderrormessageexit(字串)

  • url: 已載入的 URL。 (字串)

  • code: 錯誤碼,僅在 loaderror 的情況下。 (數字)

  • message: 錯誤訊息,僅在 loaderror 的情況下。 (字串)

  • data: 訊息內容,僅在 message 的情況下。一個字串化的 JSON 物件。 (字串)

支援的平台

  • Android
  • 瀏覽器
  • iOS
  • Windows
  • OSX

瀏覽器怪癖

不會觸發 loadstartloaderrormessage 事件。

Windows 怪癖

不會觸發 message 事件。

快速範例

var ref = cordova.InAppBrowser.open('https://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert(event.url); });

InAppBrowser.removeEventListener

InAppBrowser 中移除事件的接聽程式。(僅在目標設定為 '_blank' 時可用)

ref.removeEventListener(eventname, callback);
  • ref: InAppBrowser 視窗的參考。 (InAppBrowser)

  • eventname: 要停止接聽的事件。 (字串)

    • loadstart: 當 InAppBrowser 開始載入 URL 時觸發的事件。
    • loadstop: 當 InAppBrowser 完成載入 URL 時觸發的事件。
    • loaderror: 當 InAppBrowser 載入 URL 時發生錯誤時觸發的事件。
    • exit: 當 InAppBrowser 視窗關閉時觸發的事件。
    • message: 當 InAppBrowser 收到從 InAppBrowser 網頁檢視中載入的頁面張貼的訊息時觸發的事件。
  • callback: 事件觸發時要執行的函式。函式會傳遞 InAppBrowserEvent 物件。

支援的平台

  • Android
  • 瀏覽器
  • iOS
  • Windows

快速範例

var ref = cordova.InAppBrowser.open('https://apache.org', '_blank', 'location=yes');
var myCallback = function(event) { alert(event.url); }
ref.addEventListener('loadstart', myCallback);
ref.removeEventListener('loadstart', myCallback);

InAppBrowser.close

關閉 InAppBrowser 視窗。

ref.close();
  • ref: InAppBrowser 視窗的參考 (InAppBrowser)

支援的平台

  • Android
  • 瀏覽器
  • iOS
  • Windows

快速範例

var ref = cordova.InAppBrowser.open('https://apache.org', '_blank', 'location=yes');
ref.close();

InAppBrowser.show

顯示已隱藏開啟的 InAppBrowser 視窗。如果 InAppBrowser 已可見,則呼叫此方法無效。

ref.show();
  • ref: InAppBrowser 視窗的參考 (InAppBrowser)

支援的平台

  • Android
  • 瀏覽器
  • iOS
  • Windows

快速範例

var ref = cordova.InAppBrowser.open('https://apache.org', '_blank', 'hidden=yes');
// some time later...
ref.show();

InAppBrowser.hide

隱藏 InAppBrowser 視窗。如果 InAppBrowser 已隱藏,則呼叫此方法無效。

ref.hide();
  • ref: InAppBrowser 視窗的參考 (InAppBrowser)

支援的平台

  • Android
  • iOS
  • Windows

快速範例

var ref = cordova.InAppBrowser.open('https://apache.org', '_blank');
// some time later...
ref.hide();

InAppBrowser.executeScript

將 JavaScript 程式碼注入到 InAppBrowser 視窗中。(僅在目標設定為 '_blank' 時可用)

ref.executeScript(details, callback);
  • ref: InAppBrowser 視窗的參考。 (InAppBrowser)

  • injectDetails: 要執行的指令碼的詳細資訊,指定 filecode 金鑰。 (物件)
    • file: 要注入的指令碼 URL。
    • code: 要注入的指令碼文字。
  • callback: 在注入 JavaScript 程式碼後執行的函式。
    • 如果注入的指令碼類型為 code,則回呼會以單一參數執行,該參數是指令碼的傳回值,並包裝在 Array 中。對於多行指令碼,這是最後一個陳述式的傳回值,或是最後評估的運算式。

支援的平台

  • Android
  • 瀏覽器
  • iOS
  • Windows

快速範例

var ref = cordova.InAppBrowser.open('https://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
    ref.executeScript({file: "myscript.js"});
});

瀏覽器怪癖

  • 僅支援 code 金鑰。

Windows 怪癖

由於 MSDN 文件,所叫用的指令碼只能傳回字串值,否則傳遞給 callback 的參數將為 [null]

InAppBrowser.insertCSS

將 CSS 注入到 InAppBrowser 視窗中。(僅在目標設定為 '_blank' 時可用)

ref.insertCSS(details, callback);
  • ref: InAppBrowser 視窗的參考 (InAppBrowser)

  • injectDetails: 要執行的指令碼的詳細資訊,指定 filecode 金鑰。 (物件)
    • file: 要注入的樣式表 URL。
    • code: 要注入的樣式表文字。
  • callback: 在注入 CSS 後執行的函式。

支援的平台

  • Android
  • iOS
  • Windows

快速範例

var ref = cordova.InAppBrowser.open('https://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
    ref.insertCSS({file: "mystyles.css"});
}); __

範例:使用 InAppBrowser 顯示說明頁面

您可以使用此外掛程式在應用程式中顯示有用的文件頁面。使用者可以檢視線上說明文件,然後關閉它們,而無需離開應用程式。

以下是一些程式碼片段,示範如何執行此操作。

讓使用者可以請求協助

在應用程式中有很多方法可以執行此操作。下拉式清單是執行此操作的簡單方法。


<select id="help-select">
    <option value="default">Need help?</option>
    <option value="article">Show me a helpful article</option>
    <option value="video">Show me a helpful video</option>
    <option value="search">Search for other topics</option>
</select>

在頁面的 onDeviceReady 函式中收集使用者的選擇,然後將適當的 URL 傳送至某些共用程式庫檔案中的協助程式函式。我們的協助程式函式命名為 showHelp(),我們將在接下來撰寫該函式。


$('#help-select').on('change', function (e) {

    var url;

    switch (this.value) {

        case "article":
            url = "https://cordova.dev.org.tw/docs/en/latest/"
                        + "reference/cordova-plugin-inappbrowser/index.html";
            break;

        case "video":
            url = "https://youtu.be/F-GlVrTaeH0";
            break;

        case "search":
            url = "https://www.google.com/#q=inAppBrowser+plugin";
            break;
    }

    showHelp(url);

});

載入說明頁面

我們將使用 open 函式來載入說明頁面。我們將 hidden 屬性設定為 yes,以便我們只在載入頁面內容後才顯示瀏覽器。這樣,使用者就不會在等待內容出現時看到空白的瀏覽器。當引發 loadstop 事件時,我們就會知道內容已載入。我們稍後將處理該事件。


function showHelp(url) {

    var target = "_blank";

    var options = "location=yes,hidden=yes";

    inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);

    inAppBrowserRef.addEventListener('loadstart', loadStartCallBack);

    inAppBrowserRef.addEventListener('loadstop', loadStopCallBack);

    inAppBrowserRef.addEventListener('loaderror', loadErrorCallBack);

}

讓使用者知道您正在準備他們的頁面

因為瀏覽器不會立即顯示,我們可以利用 loadstart 事件來顯示狀態訊息、進度列或其他指示器。這可確保使用者知道內容即將送達。


function loadStartCallBack() {

    $('#status-message').text("loading please wait ...");

}

顯示說明頁面

當引發 loadstopcallback 事件時,我們知道內容已載入,並且可以讓瀏覽器可見。這種技巧可以產生效能更好的印象。事實是,無論您是否在載入內容之前顯示瀏覽器,載入時間都完全相同。


function loadStopCallBack() {

    if (inAppBrowserRef != undefined) {

        inAppBrowserRef.insertCSS({ code: "body{font-size: 25px;}" });

        $('#status-message').text("");

        inAppBrowserRef.show();
    }

}

您可能已經注意到對 insertCSS 函式的呼叫。這在我們的案例中沒有任何特定用途。但它讓您了解為什麼您可能會使用它。在這種情況下,我們只是確保您頁面的字型大小具有特定大小。您可以使用此函式插入任何 CSS 樣式元素。您甚至可以指向專案中的 CSS 檔案。

處理頁面錯誤

有時候頁面可能不再存在、發生腳本錯誤,或使用者沒有檢視該資源的權限。如何處理這種情況完全取決於您和您的設計。您可以讓瀏覽器顯示該訊息,也可以用其他方式呈現。

我們會嘗試在訊息框中顯示該錯誤。我們可以藉由注入一個呼叫 alert 函式的腳本來做到這一點。也就是說,這在 Windows 裝置上的瀏覽器中將無法運作,因此我們必須查看 executeScript 回呼函式的參數,以了解我們的嘗試是否成功。如果沒有成功,我們將只會在頁面上的 <div> 中顯示錯誤訊息。


function loadErrorCallBack(params) {

    $('#status-message').text("");

    var scriptErrorMesssage =
       "alert('Sorry we cannot open that page. Message from the server is : "
       + params.message + "');"

    inAppBrowserRef.executeScript({ code: scriptErrorMesssage }, executeScriptCallBack);

    inAppBrowserRef.close();

    inAppBrowserRef = undefined;

}

function executeScriptCallBack(params) {

    if (params[0] == null) {

        $('#status-message').text(
           "Sorry we couldn't open that page. Message from the server is : '"
           + params.message + "'");
    }

}

更多使用資訊

本地網址 ( 來源在應用程式套件中 )

var iab = cordova.InAppBrowser;

iab.open('local-url.html');                  // loads in the Cordova WebView
iab.open('local-url.html', '_self');         // loads in the Cordova WebView
iab.open('local-url.html', '_system');       // Security error: system browser, but url will not load (iOS)
iab.open('local-url.html', '_blank');        // loads in the InAppBrowser
iab.open('local-url.html', 'random_string'); // loads in the InAppBrowser
iab.open('local-url.html', 'random_string', 'location=no'); // loads in the InAppBrowser, no location bar

已加入白名單的內容

var iab = cordova.InAppBrowser;

iab.open('https://whitelisted-url.com');                  // loads in the Cordova WebView
iab.open('https://whitelisted-url.com', '_self');         // loads in the Cordova WebView
iab.open('https://whitelisted-url.com', '_system');       // loads in the system browser
iab.open('https://whitelisted-url.com', '_blank');        // loads in the InAppBrowser
iab.open('https://whitelisted-url.com', 'random_string'); // loads in the InAppBrowser

iab.open('https://whitelisted-url.com', 'random_string', 'location=no'); // loads in the InAppBrowser, no location bar

未加入白名單的網址

var iab = cordova.InAppBrowser;

iab.open('https://url-that-fails-whitelist.com');                  // loads in the InAppBrowser
iab.open('https://url-that-fails-whitelist.com', '_self');         // loads in the InAppBrowser
iab.open('https://url-that-fails-whitelist.com', '_system');       // loads in the system browser
iab.open('https://url-that-fails-whitelist.com', '_blank');        // loads in the InAppBrowser
iab.open('https://url-that-fails-whitelist.com', 'random_string'); // loads in the InAppBrowser
iab.open('https://url-that-fails-whitelist.com', 'random_string', 'location=no'); // loads in the InAppBrowser, no location bar