文档章节

ngCordova插件之InAppBrowser插件的使用

邪气小生
 邪气小生
发布于 2016/03/01 13:37
字数 611
阅读 2210
收藏 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)

邪气小生
邪气小生
准确的说,这是一个同事总结!
cordova-imagepicker 插件使用问题

我使用 ionic start 创建了项目,照着流程安装好了cordova-plugin-imagepicker,index.html 中引入了 ng-cordova.js model中加入了 ['ngCordova'] ,imagepicker部分代码 但是我用 phonegap......

viki_php
2016/04/26
262
0
ionic 完美仿微信摇一摇

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

ionic中文网
2016/03/23
2.3K
4
Ionic系列——使用ng-cordova插件

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

龙马行空
2015/07/28
0
0
ionic助手 v1.9.0 一键式开发环境工具(告别命令行,超强功能)

ionic中文社区群:65048636 注意:使用前请确保您已经安装部署好ionic环境 搭建绿色环境:Ionic_1.x 5分钟快速搭建绿色开发环境 手动搭建环境:Ionic_2.x 手动搭建开发环境 有了ionic助手,再...

ionic中文网
2016/11/28
2.8K
1
ngCordova的插件到底要怎么用?

自学ionic已经快一个月了,感觉这玩意没人带入门真心寸步难行,官网的API缺斤少两的,搞半天一个文件读写插件都没能成功执行,不晓得是缺了哪个要点~~ 这里能够成功弹出“执行成功”,却没有...

陶中马
2016/03/21
1K
3

没有更多内容

加载失败,请刷新页面

加载更多

CentOS5.11配置Let's Encrypt免费证书

安装环境: [root@WQ02 opt]# lsb_release -aLSB Version::core-4.0-amd64:core-4.0-ia32:core-4.0-noarch:graphics-4.0-amd64:graphics-4.0-ia32:graphics-4.0-noarch:printing-4.0-amd6......

m_lm
27分钟前
1
0
看看Canonical分享的2018年的十大Linux Snap

导读 Linux在2018年最令人耳目一新的一个方面是Snaps的普及。 Canonical透露,集装箱化的包装已经取得了巨大的成功。今天,Ubuntu制造商分享了2018年的十大Snap。 随着2018年即将结束,我发现...

问题终结者
40分钟前
2
0
天啦噜!在家和爱豆玩"剪刀石头布",阿里工程师如何办到?

阿里妹导读:如今,90、00后一代成为消费主力,补贴、打折、优惠等“价格战”已很难建立起忠诚度,如何与年轻人建立更深层次的情感共鸣?互动就是一种很好的方式,它能让用户更深度的参与品牌...

阿里云官方博客
今天
1
0
聊聊flink的Table API及SQL Programs

序 本文主要研究一下flink的Table API及SQL Programs 实例 // for batch programs use ExecutionEnvironment instead of StreamExecutionEnvironmentStreamExecutionEnvironment env = Stre......

go4it
今天
3
0
mysqldump应用

备份单个库/表数据或库/表结构 命令行下具体用法如下: mysqldump -u用戶名 -p密码 -d 数据库名 表名 > 备份文件名 1、导出数据库为dbname的表结构(其中用戶名為root,密码为dbpasswd,生成的...

阿dai
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部