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 按鈕,將看到螢幕上的以下輸出。

控制台也將監聽事件。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);