文档章节

ngCordova插件之InAppBrowser插件的使用

邪气小生
 邪气小生
发布于 2016/03/01 13:37
字数 611
阅读 2183
收藏 5
点赞 1
评论 1

之前详细的写了关于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助手 v1.9.0 一键式开发环境工具(告别命令行,超强功能)

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

ionic中文网
2016/11/28
2.6K
1
ionic 完美仿微信摇一摇

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

ionic中文网
2016/03/23
2K
4
我用的 cordova 插件

cordova 插件不少,但合适自己的才是最好的 cordova-plugin-camera 相机拍照 cordova-plugin-device 检查当前操作系统和设备情况 cordova-plugin-file 文件 cordova-plugin-file-transfer 文...

Tom-Lin
2015/12/24
283
0
cordova-imagepicker 插件使用问题

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

viki_php
2016/04/26
235
0
在ionic应用中打开外部网站(使用InAppBrowser插件)

在安卓上试了一下,如果直接window.open(url), 在app中点击外部链接没有任何反应。 安装https://github.com/apache/cordova-plugin-inappbrowser 执行命令: ionic plugin add cordova-plu...

cyper
2015/11/03
0
3
ionic cordova 常用命令

ionic 先在桌面环境下测试,Chrome运行正常,然后编译成各种移动平台版本,这里以android版本为例cd q-metroionic platform add androidionic build androidionic run android如果要在虚拟机...

canroline
2016/01/20
170
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

【RocketMQ】Message存储笔记

概述 消息中间件存储分为三种,一是保存在内存中,速度快但会因为系统宕机等因素造成消息丢失;二是保存在内存中,同时定时将消息写入DB中,好处是持久化消息,如何读写DB是MQ的瓶颈;三是内...

SaintTinyBoy
19分钟前
0
0
Android应用Context详解及源码解析

Android应用Context详解及源码解析 本文定位:优质文章收集 本文转载 1 背景 今天突然想起之前在上家公司(做TV与BOX盒子)时有好几个人问过我关于Android的Context到底是啥的问题,所以就马...

lichuangnk
51分钟前
0
0
PostgreSQL的昨天今天和明天

PostgreSQL 是一种非常复杂的对象-关系型数据库管理系统(ORDBMS), 也是目前功能最强大,特性最丰富和最复杂的自由软件数据库系统。有些特性甚至连商业数据库都不具备。 这个起源于伯克利(...

闻术苑
55分钟前
1
0
Mysql对自增主键ID进行重新排序

1,删除原有主键: ALTER TABLE `table_name` DROP `id`; 2,添加新主键字段: ALTER TABLE `table_name` ADD `id` MEDIUMINT( 8 ) NOT NULL FIRST; 3,设置新主键: ALTER TABLE `table_nam......

niithub
今天
0
0
福利篇:免费csdn vip账号分享

分享一个发布免费csdn vip账号的网站:啰嗦vip www.lostvip.com , 各种软件开发类的视频教程:慕课网、动脑学院、黑马各大培训机构VIP视频教程,非常不错!

在水一方发盐人
今天
0
0
Nginx+Tomcat搭建高性能负载均衡集群

一、 工具   nginx-1.8.0   apache-tomcat-6.0.33 二、 目标   实现高性能负载均衡的Tomcat集群:    三、 步骤   1、首先下载Nginx,要下载稳定版:      2、然后解压两个Tom...

码代码的小司机
今天
0
0
Centos7编译安装ntp-4.2.8p11

Centos7编译安装ntp-4.2.8p11 背景 因公司做等保评级,在进行安全漏洞检测时发现ntp需要升级到ntp-4.2.7p25以上版本,经过一番搜索,没有该版本及新版本ntp的yum安装包,所以只能编译安装了,...

阿dai
今天
0
0
antd pro 新增模块的步骤

index.js是整个项目的入口文件。 // 1. Initializeconst app = dva({ history: createHistory(),});// 2. Pluginsapp.use(createLoading());// 3. Register global modelapp.model......

灯下草虫鸣_
今天
0
0
Cisco VPN在win10下报Error 56的解决办法

问题描述 Cisco VPN在win10下报Error 56: The Cisco Systems, Inc. VPN Service has not been started 解决方案 方案一:在计算机管理-》服务 查看Cisco Systems, Inc. VPN Service服务是否存...

chenfj_fer
今天
0
0
Weblogic问题解决记录

问题:点击登录,页面刷新但是不进去管理界面。解决:删除cookies再登录。

wffger
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部