這個插件用於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 按鈕，將看到螢幕上的以下輸出。
控制臺也將監聽事件。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多媒體