Cordova InAppBrowser

2018-12-28 15:01 更新

此插件用于在Cordova應用程序中打開Web瀏覽器。

步驟1 - 安裝插件

我們需要在命令提示符窗口中安裝此插件,我們才能使用它。

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

步驟2 - 添加按鈕

我們將添加一個按鈕,用于打開 index.html 中的 inAppBrowser 窗口。

步驟3 - 添加事件監(jiān)聽器

現(xiàn)在讓我們在 index.js 中的 onDeviceReady 函數(shù)中為我們的按鈕添加事件監(jiān)聽器。

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

步驟4 - 創(chuàng)建函數(shù)

在這一步,我們創(chuàng)建的功能將打開瀏覽器在我們的應用程序。我們將它分配給 ref 變量,我們稍后可以使用它添加事件監(jiān)聽器。

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 InAppBrowser Open

控制臺還將監(jiān)聽事件。 當網(wǎng)址開始加載時, loadstart 事件將觸發(fā),并且在加載網(wǎng)址時加載 loadstop 。 我們可以在控制臺看到它。

Cordova InAppBrowser Console

關閉瀏覽器后,退出事件將會觸發(fā)。

Cordova InAppBrowser Exit Console

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

選項描述
location用于打開或關閉瀏覽器位置欄。 值為。
hidden用于隱藏或顯示inAppBrowser。 值為。
clearCache用于清除瀏覽器緩存緩存。 值為。
clearsessioncache用于清除會話cookie緩存。 值為。
zoom用于隱藏或顯示Android瀏覽器的縮放控件。 值為。
hardwareback使用硬件后退按鈕瀏覽瀏覽器歷史記錄。 可在關閉瀏覽器后點擊返回按鈕。

對于一些其他功能,我們可以使用 ref (reference)變量。我們將向您展示它的快速示例。對于刪除事件偵聽器,我們可以使用 -

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);
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號