Cordova InAppBrowser打開Web瀏覽器

這個插件用於Cordova 應用程序內打開Web瀏覽器。

第1步 - 安裝插件

我們能夠使用這個插件之前，需要在命令提示符窗口中安裝這個插件。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser

第2步 - 添加按鈕

我們將在 index.html 添加一個按鈕將用於打開 inAppBrowser 窗口。

第3步 - 添加事件監聽器

現在讓我們在index.j爲我們的按鈕添加事件偵聽器到 onDeviceReady 函數中。

document.getElementById("openBrowser").addEventListener("click", openBrowser);

第4步 - 創建函數

在這一步中，我們創建一個功能，在應用程序內打開瀏覽器。我們將其分配給之後可以用它來添加事件偵聽器的 ref 變量。

function openBrowser() {
var url = 'https://cordova.apache.org';
var target = '_blank';
var options = "location=yes"
var ref = cordova.InAppBrowser.open(url, target, options);

ref.addEventListener('loadstart', loadstartCallback);
ref.addEventListener('loadstop', loadstopCallback);
ref.addEventListener('loadloaderror', loaderrorCallback);
ref.addEventListener('exit', exitCallback);

function loadstartCallback(event) {
console.log('Loading started: ' + event.url)
}

function loadstopCallback(event) {
console.log('Loading finished: ' + event.url)
}

function loaderrorCallback(error) {
console.log('Loading error: ' + error.message)
}

function exitCallback() {
console.log('Browser is closed...')
}
}

如果我們按下 BROWSER 按鈕，將看到屏幕上的以下輸出。
Cordova

控制檯也將監聽事件。loadstart事件將觸發當URL開始加載以及loadstop加載URL將閃光。我們可以控制檯中看到它在。

當關閉瀏覽器，退出事件將觸發。

InAppBrowser窗口其它可能的選擇。我們將在下面的表解釋。

option

details

location

用來打開瀏覽器地址欄中打開或關閉。它的值是 yes 或 no

hidden

用於隱藏或顯示inAppBrowser。它的值是 yes 或 no

clearCache

用於清除瀏覽器的cookie緩存。它的值是 yes 或 no

clearsessioncache

用於清除會話cookie緩存。它的值是 yes 或 no

zoom

用於隱藏或顯示Android瀏覽器的縮放控制。它的值是 yes 或 no

hardwareback

yes使用於硬件後退按鈕導航回到通過瀏覽器歷史記錄。 no用於關閉瀏覽器，當後退按鈕被點擊

我們可以用 ref(參考)變量爲一些其他功能。對於刪除事件偵聽器，可以使用 −

ref.removeEventListener(eventname, callback);

對於關閉 InAppBrowser 可以使用 −

ref.close();

如果我們打開了隱藏的窗口，我們可以顯示它 -

ref.show();

即使是JavaScript代碼可以被注入到InAppBrowser −

var details = "javascript/file/url"
ref.executeScript(details, callback);

可用於注入 CSS -

var details = "css/file/url"
ref.inserCSS(details, callback);

Cordova教程

Cordova InAppBrowser打開Web瀏覽器