Ionic - Cordova InAppBrowser
Cordova InAppBrowser 插件用于在 Web 浏览器视图中从应用内打开外部链接。
使用 Browser
使用此插件非常简单。只需打开命令提示符窗口并安装 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 代码
.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) {
// 成功
})
.catch(function(event) {
// 错误
});
}
})
当用户点击按钮时,InAppBrowser 将打开我们提供的 URL。
此插件还可以使用其他几种方法,其中一些列在下表中。
Cordova $inAppBrowser 方法
| 方法 | 参数 | 类型 | 详情 |
|---|---|---|---|
| setDefaultOptions(parameter1) | options | object | 用于为所有 InAppBrowsers 设置全局选项。 |
| open(parameter1, parameter2, parameter3) | URL, target, options | string, string, object | 有三个可用的 target。_blank 将打开新的 inAppBrowser 实例。_system 将打开系统浏览器,_self 将使用当前浏览器实例。 |
| close | / | / | 用于关闭 InAppBrowser。 |
Cordova InAppBrowser 事件
此插件还提供可以与 $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:exit', function(e, event)); | inAppBrowser 窗口关闭时调用。 |