第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 按鈕，将看到螢幕上的以下輸出。
控制台也将監聽事件。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);