文档章节

ngCordova插件之InAppBrowser插件的使用

邪气小生
 邪气小生
发布于 2016/03/01 13:37
字数 611
阅读 2192
收藏 5

之前详细的写了关于ngCordova安装,配置和使用的wiki,这一次我们来细说其中的插件具体使用方法——InAppBrowser插件
InAppBrowser插件是在APP打开浏览器的页面的一个插件,当我们在APP中需要跳转到一个特定的浏览器网页时,用这个插件会很方便。
下面开始讲解InAppBrowser的具体使用:
ngCordova的安装配置在"ngCordova插件使用详解"中已经详细的叙述了。

传送门:http://hpm.hand-china.com/w/newleonchan/ngcordova/

这篇wiki我们直接讨论如何使用:
1.打开浏览器的页面

$cordovaInAppBrowser.open(URL, target, options)

open()中的URL参数为浏览器跳转的地址。
target的参数有三种:_self,_blank,_system,_self是如果URL地址在WhiteList中,则用Cordova的Webview将其打开;如果是_blank则直接在APP中将其打开;如果是_system则是用手机默认浏览器将新页面打开。
options参数包含以下信息:
location:设置为yes或no来打开或关闭插件的locationbar
hidden:设置为yes则加载出页面但不显示;设置为no则正常加载页面
zoom(Android独有属性):设置为yes则显示缩放浏览器页面的按钮,设置为no则不显示缩放按钮
hardwareback(Android独有属性):设置为yes则调用Android返回键回到前一界面,设置为no则返回键为退出浏览器页面
closebuttoncaption(IOS独有属性):设置yes则显示Done按钮,设置为no则隐藏Done按钮,点击Done按钮关闭浏览器页面
toolbar(IOS独有属性):设置为yes则显示toolbar;no则隐藏toolbar(toolabar相当于Android的返回键功能)
说了这么多,下面上代码:

$scope.openPage=function(){
        var options = {
         toolbar: 'yes'
     };
     $cordovaInAppBrowser.open('http://www.baidu.com', '_blank', options)
 }

openPage是我写的一个方法,在html页面中在相应位置用ng-click去调用这个方法,此时就会触发浏览器跳转的事件,而根据open()中的设置,URL参数是百度的网址;target参数为"_blank",也就是在APP中打开网址的页面;而options参数为IOS系统下会显示toolbar
具体打开的效果如下:

可以看到上面的locationbar,当我们点击×或手机返回键的时候,这个界面就会消失,回到跳转进这个界面前的APP界面。



© 著作权归作者所有

共有 人打赏支持
邪气小生
粉丝 14
博文 52
码字总数 67752
作品 0
朝阳
程序员
加载中

评论(1)

邪气小生
邪气小生
准确的说,这是一个同事总结!
Ionic系列——使用ng-cordova插件

1、cordova介绍 Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。 Cordova支持如下7种移动操作系统:iOS, Android,ubuntu...

龙马行空
2015/07/28
0
0
Mobile first! Wijmo 5 + Ionic Framework之:Hello Wor

本教程中,我们用Wijmo 5 和 Ionic Framework实现一个Mobile的工程:Hello World。 Ionic是什么? Ionic是一个HTML5框架、免费、开源,用于帮助生成hybird mobile Apps (混合移动应用)。 Ioni...

葡萄城控件技术团队
2014/10/28
0
2
ngCordova安装与插件的使用 --相机拍摄和本地相册选择照片

一,安装ngCordova bower install ngCordova --save-dev 二,引入ng-cordova.js文件 把ng-cordova.js或ng-cordova.min.js 引入到index.html中。 注意顺序:要放在cordova.js之前,AngularJS......

我有我
2016/04/11
1K
0
iOS版 PhoneGap 跳转网页问题

技术问题:系统自动检查更新,有新版本进行提示,并跳转到App Store,发现无法跳转到App Strore,但是可以打开百度等网页 安装插件:org.apache.cordova.inappbrowser 插件地址:http://plug...

2tman
2015/02/06
0
0
ionic 完美仿微信摇一摇

今天我们使用ionic框架完美仿制微信摇一摇功能,先来看看最终效果图 制作微信摇一摇功能需要调用 陀螺仪传感器(Device Motion) 参考文档地址http://api.ionic-china.com/help/action/Device%2...

ionic中文网
2016/03/23
2K
4

没有更多内容

加载失败,请刷新页面

加载更多

Java并发编程:volatile关键字解析

volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在Java 5之后,volatile关键字才得以重获生...

engeue
14分钟前
1
0
php-fpm配置文件详解

第一部分:FPM 配置 参数          | 说明 -p            | 命令行中动态修改--prefix   ;include=etc/fpm.d/*.conf  | 用于包含一个或多个文件,如果glob(3)存在(...

bengozhong
16分钟前
1
0
Django允许外部ip访问

1、关闭防火墙 service iptables stop 2、设置django 开启django时,使用0.0.0.0:xxxx,作为ip和端口例如: python manage.py runserver 0.0.0.0:9000 3、在settings里修改ALLOWED_HOSTS = [......

MichaelShu
19分钟前
1
0
机器学习在客户管理场景中的应用

使用机器学习进行客户管理,我们可以得到客户360度全方位的视图。 本文以SAP Cloud for Customer的客户管理应用为例,介绍机器学习是如何同传统的客户管理应用进行集成的。 打开SAP C4C的客户...

JerryWang_SAP
25分钟前
1
0
ftp链接ubuntu虚拟机

1.在主机上安装Xftp 5 2.在虚拟机中输入: sudo apt-get install vsftpd 3.打开 /etc/vsftpd.conf修改如下变量 listen=YES anonymous_enable=YES local_enable=YES write_enable=yes local_......

15834278076
30分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部