Cordova - InAppBrowser (應用內瀏覽器)

此外掛用於在 Cordova 應用內開啟網頁瀏覽器。

步驟 1 - 安裝外掛

在我們能夠使用它之前，需要在 **命令提示符** 視窗中安裝此外掛。

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

步驟 2 - 新增按鈕

我們將新增一個按鈕，用於在 **index.html** 中開啟 **InAppBrowser** 視窗。

步驟 3 - 新增事件監聽器

現在，讓我們在 **index.js** 檔案中 **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('loaderror', 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** 按鈕，我們將在螢幕上看到以下輸出。

控制檯也將監聽事件。當 URL 開始載入時，**loadstart** 事件將觸發；當 URL 載入完成時，**loadstop** 事件將觸發。我們可以在控制檯中看到它們。

關閉瀏覽器後，**exit** 事件將觸發。

InAppBrowser 視窗還有其他可能的選項。我們將在下表中解釋。

序號	選項及詳情
1	location 用於啟用或停用瀏覽器位置欄。值為 yes 或 no。
2	hidden 用於隱藏或顯示 InAppBrowser。值為 yes 或 no。
3	clearCache 用於清除瀏覽器 Cookie 快取。值為 yes 或 no。
4	clearsessioncache 用於清除會話 Cookie 快取。值為 yes 或 no。
5	zoom 用於隱藏或顯示 Android 瀏覽器的縮放控制元件。值為 yes 或 no。
6	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);

列印頁面

序號	選項及詳情
1	location 用於啟用或停用瀏覽器位置欄。值為 yes 或 no。
2	hidden 用於隱藏或顯示 InAppBrowser。值為 yes 或 no。
3	clearCache 用於清除瀏覽器 Cookie 快取。值為 yes 或 no。
4	clearsessioncache 用於清除會話 Cookie 快取。值為 yes 或 no。
5	zoom 用於隱藏或顯示 Android 瀏覽器的縮放控制元件。值為 yes 或 no。
6	hardwareback yes 表示使用硬體返回按鈕在瀏覽器歷史記錄中後退。no 表示單擊返回按鈕後關閉瀏覽器。