📌  相关文章
📜  Cordova-InAppBrowser

📅  最后修改于: 2020-12-09 05:36:51             🧑  作者: Mango

该插件用于在Cordova应用程序中打开Web浏览器。

第1步-安装插件

我们需要先在命令提示符窗口中安装此插件，然后才能使用它。

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

第2步-添加按钮

我们将在index.html中添加一个用于在AppBrowser窗口中打开的按钮。

第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...')
   }
}

如果按浏览器按钮，我们将在屏幕上看到以下输出。

科尔多瓦InAppBrowser打开

控制台还将监听事件。 URL开始加载时将启动loadstart事件，而URL加载时将触发loadstop 。我们可以在控制台中看到它。

Cordova InAppBrowser控制台

关闭浏览器后，将触发退出事件。

Cordova InAppBrowser退出控制台

InAppBrowser窗口还有其他可能的选项。我们将在下表中对其进行说明。

S.No option & details
1

location

Used to turn the browser location bar on or off. Values are yes or no.
2

hidden

Used to hide or show inAppBrowser. Values are yes or no.
3

clearCache

Used to clear browser cookie cache. Values are yes or no.
4

clearsessioncache

Used to clear session cookie cache. Values are yes or no.
5

zoom

Used to hide or show Android browser’s zoom controls. Values are yes or no.
6

hardwareback

yes to use the hardware back button to navigate back through the browser history. no to close the browser once back button is clicked.

我们可以将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);