Ionic - Cordova InAppBrowser


Cordova InAppBrowser 插件用于在 Web 浏览器视图中打开应用程序的外部链接。

使用浏览器

开始使用这个插件非常容易。您所需要做的就是打开命令提示符窗口并安装 Cordova 插件。

C:\Users\Username\Desktop\MyApp>cordova plugin add org.apache.cordova.inappbrowser

这一步允许我们开始使用inAppBrowser。我们现在可以创建一个按钮,将我们引导到一些外部链接,并添加一个简单的函数来触发插件。

HTML 代码

<button class = "button" ng-click = "openBrowser()">OPEN BROWSER</button>

控制器代码

.controller('MyCtrl', function($scope, $cordovaInAppBrowser) {
   var options = {
      location: 'yes',
      clearcache: 'yes',
      toolbar: 'no'
   };
   
   $scope.openBrowser = function() {
      $cordovaInAppBrowser.open('http://ngcordova.com', '_blank', options)
		
      .then(function(event) {
         // success
      })
		
      .catch(function(event) {
         // error
      });
   }
})

当用户点击按钮时,InAppBrowser 将打开我们提供的 URL。

Ionic Cordova InApp 浏览器

此插件还可以使用其他几种方法,下表中列出了其中一些方法。

Cordova $inAppBrowser 方法

方法 参数 类型 细节
setDefaultOptions(参数1) 选项 目的 用于设置所有 InAppBrowser 的全局选项。
打开(参数1,参数2,参数3) URL、目标、选项 字符串、字符串、对象 共有三个可用目标。_blank将打开新的 inAppBrowser 实例。_system将打开系统浏览器,_self将使用当前浏览器实例。
关闭 / / 用于关闭InAppBrowser。

Cordova 应用内浏览器事件

该插件还提供可以与$rootScope组合的事件。

例子 细节
$rootScope.$on('$cordovaInAppBrowser:loadstart', function(e, event)); 当 inAppBrowser 开始加载页面时调用。
$rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event)); 当 inAppBrowser 完成页面加载时调用。
$rootScope.$on('$cordovaInAppBrowser:loaderror', function(e, event)); 当 inAppBrowser 遇到错误时调用。
$rootScope.$on('$cordovaInAppBrowser:退出', function(e, event)); 当 inAppBrowser 窗口关闭时调用。