- 离子基础教程
- 离子 - 主页
- 离子 - 概述
- Ionic - 环境设置
- Ionic CSS 组件
- 离子 - 颜色
- 离子 - 内容
- 离子 - 标头
- 离子 - 页脚
- 离子 - 按钮
- Ionic - 列表
- 离子 - 卡片
- 离子 - 形式
- 离子 - 切换
- Ionic - 复选框
- Ionic - 单选按钮
- 离子 - 范围
- 离子 - 选择
- Ionic - 选项卡
- 离子 - 网格
- 离子 - 图标
- 离子 - 填充
- Ionic JavaScript 组件
- Ionic - JS 操作表
- Ionic - JS 背景
- Ionic - JS 内容
- Ionic - JS 表单
- Ionic - JS 事件
- Ionic - JS 标头
- Ionic - JS 页脚
- Ionic - JS 键盘
- Ionic - JS 列表
- Ionic - JS 加载
- Ionic - JS 模态
- Ionic - JS 导航
- Ionic - JS 弹出窗口
- Ionic - JS 弹出窗口
- Ionic - JS 滚动
- Ionic - JS 侧边菜单
- Ionic - JS 幻灯片盒
- Ionic - JS 选项卡
- 离子先进概念
- Ionic - Cordova 集成
- 离子 - AdMob
- 离子 - 相机
- 离子 - Facebook
- Ionic - 在应用程序浏览器中
- Ionic - 原生音频
- 离子 - 地理定位
- 离子 - 媒体
- Ionic - 启动画面
- 离子有用资源
- 离子 - 快速指南
- 离子 - 有用的资源
- 离子 - 讨论
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。
此插件还可以使用其他几种方法,下表中列出了其中一些方法。
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 窗口关闭时调用。 |