Cordova插件:InAppBrowser
版权声明:本文为博主原创文章,转载请注明出处
一、应用场景
我们在做cordova app开发的时候,可能会经常遇到这种需求。比如在你的app中,你想打开一个URL,但是又不想跳转到系统的浏览器去打开,而是希望直接在app中打开,这个时候就要用到这个插件了。 它会直接在我们的app中生成一个浏览器对象并打开你的网页。
二、添加插件
1. 如果你的项目是cordova原生项目,也就是说包含CordovaLib,可以通过命令去安装插件的,那你可以直接进入项目下面,运行:
cordova plugin add cordova-plugin-inappbrowser
这样inappbrowser插件就添加到我们的项目中了。
2.如果你的项目是改动后的cordova项目,估计大部分公司的cordova项目是改动后的。不可以直接用命令安装, 这个时候就要去手动添加这个插件了。
手动添加当然也很简单,但是你需要先获得这个插件,你可以通过命令去建一个cordova原生项目(参考我的另一篇文章:Cordova入门系列(一)创建项目)。创建好这个项目我们就可以用命令添加inappbrowser插件了。参考上面步骤1。这样的话我们就获取到了这个插件。
接着我们要将这个插件手动添加到我们的公司或自己的项目下面。我们有5处地方需要改:
1). 打开我们创建的原生cordova项目(并且安装了inappbrowser插件)。将src下面的org.apache.cordova.inappbrowser复制到我们自己的项目的src下面。
2). 将assets/www/plugins/cordova-plugin-inappbrowser,复制到我们自己项目下的assets/www/plugins/下面。
3). 修改assets/www/cordova_plugins.js,添加对应的inappbrowser的信息。
4). 修改res/xml/config.xml,添加对应的inappbrowser的<feature />信息。(3.4步可以参考你创建的那个原生cordova项目下面这两个文件都是什么信息。)
5). 将res下面的资源图片,复制到我们自己的项目下面。
最近做我们公司的项目,使用这个插件的时候,添加进去后(手动添加的,并不是通过命令添加的),效果没实现,InAppBrowser点击后会自动闪退。发现是由于资源图片没添加导致的。添加drawable/drawable-hdpi/.....下的图片(3个,next, previous, remove)到对应的文件夹即可。
三、使用这个插件
使用方法很简单,只需要在我们的js中通过window.open()或者cordova.inappbrowser.open()即可。
cordova.InAppBrowser.open(URL,target,options)
window.open(URL,target,options)
1. URL参数为浏览器跳转的地址;
2. target的参数有三种:
_self:如果URL地址在WhiteList中,则用Cordova的WhiteList将其打开;
_blank:直接在App中将其地址打开;
_system:则是用手机默认浏览器将新页面打开;
3. options参数包含以下信息:
location:设置为yes或no来打开或关闭插件的locationbar;
hidden:设置为yes则加载出页面但不显示;设置为no则正常加载页面;
Android独有属性:
zoom:设置为yes则显示缩放浏览器页面的按钮,设置为no则不显示缩放按钮;
hardwareback:设置为yes则调用Android返回键回到前一界面,设置为no则返回键为退出浏览器页面;
iOS独有属性:
closebuttoncaption:设置yes则显示Done按钮,设置为no则隐藏Done按钮,点击Done按钮关闭浏览器页面;
toolbar:设置为yes则显示toolbar;no则隐藏toolbar(toolabar相当于Android的返回键功能);
keyboardDisplayRequiresUserAction:设置为yes或者no来控制打开键盘时是否通过JavaScript调用focus()接收焦点,默认为yes;
toolbarposition:设置为top或者bottom,使工具栏显示在窗口的顶部或底部;
四、举个栗子
举个简单的例子,假如在你的页面上有一个button,点击它会调用inappbrowser
<button onclick="cordova.InAppBrowser.open('http://www.baidu.com', '_blank', 'location=yes')"> Test InAppBrowser </button>
Cordova插件:InAppBrowser的更多相关文章
- 【No.4 Ionic】修改 cordova 插件
在使用 cordova 过程 使用的插件 有可能不能满足个人需求,就需要修改,下面就直接说说步骤 插件结构 我用 cordova-plugin-inappbrowser 插件 讲解 在目录中有个 sr ...
- 理清cordova插件的调用流程
从调用的角度看流程 前端调用(clobbers)——>cordova_plugins.js(clobbers对应插件id和插件文件所在的路径)—–>js部分(配置着插件的名字,已经插件里 ...
- Cordova插件相关常用命令
一,插件相关常用命令 1,查看所有已经安装的插件 1 cordova plugin ls 2,安装插件(以camera插件为例) 1 cordova plugin add cordova-plug ...
- cordova插件iOS平台实战开发注意点
cordova插件是其设计理念的精髓部分,创建并使用自定义插件也是一件比较容易的事.但在这个过程中也容易进入一些误区或者有一些错误的理解,下面从笔者实际开发中遇到的问题出发,对其中的一些注意点和重要概 ...
- 如何给Ionic写一个cordova插件
写一个cordova插件 之前由javaWeb转html5开发,由于面临新技术,遂在适应的过程中极为挣扎,不过还好~,这个过程也极为短暂:现如今面临一些较为复杂的需求还会有一丝丝头痛,却没有一开始那么 ...
- ionic实战系列(二):使用cordova插件
本章主要关注cordova的各种插件,利用好手机(移动设备)的原生功能.首先cordova是一个将web网页内嵌到原生app的平台(核心功能),然后cordova拥有的插件系统扩展了核心功能. Cor ...
- cordova插件汇总
1.获取当前应用的版本号 cordova plugin add cordova-plugin-app-version 2.获取网络连接信息 cordova plugin add cordova-plu ...
- Cordova入门系列(三)Cordova插件调用 转发 https://www.cnblogs.com/lishuxue/p/6018416.html
Cordova入门系列(三)Cordova插件调用 版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心 ...
- Cordova入门系列(三)Cordova插件调用
版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心内容,插件的调用.演示一个例子,通过cordova插件, ...
- 自定义 Cordova插件(基础篇)
cordova自定义插件 注意:存放自定义cordova插件目录不能有空格可能会报错 cordova的安装 下载node.js,安装完成后你可以在命令行中使用node和npm. 安装cordova使用 ...
随机推荐
- 2019/3/26 wen 数组
- shell 中的小技巧
去掉最后一个字符 sed 's/.$//' awk '{sub(/.$/,"")}1' awk '{printf $0"\b \n"}' [root@ ~]# ...
- 详解设计模式之工厂模式(简单工厂+工厂方法+抽象工厂) v阅读目录
1楼留头头大神:http://www.cnblogs.com/toutou/p/4899388.html v阅读目录 v写在前面 v简单工厂模式 v工厂方法模式 v抽象工厂模式 v博客总结 v博客 ...
- nagios监控oracle 表空间
oracle表空间满的危害以及处理方式见我的博客链接https://www.cnblogs.com/-abm/p/9764803.html 除此之外我们还需要对表空间实时监控,这样就可以及时了解表空间 ...
- Vijos 1404 遭遇战 - 动态规划 - 线段树 - 最短路 - 堆
背景 你知道吗,SQ Class的人都很喜欢打CS.(不知道CS是什么的人不用参加这次比赛). 描述 今天,他们在打一张叫DUSTII的地图,万恶的恐怖分子要炸掉藏在A区的SQC论坛服务器!我们SQC ...
- ssh-copy-id命令解析
ssh-copy-id命令可以把本地主机的公钥复制到远程主机的authorized_keys文件上, ssh-copy-id命令也会给远程主机的用户主目录(home)和~/.ssh, 和~/.ssh/ ...
- 纯注解方式配置spring+springMVC
1.新建类initConfig,继承AbstractAnnotationConfigDispatcherServletInitializer,并重写getRootConfigClasses().get ...
- topcoder srm 550 div1
problem1 link 因为数据比较小,直接开一个二维数组记录哪些格子已经遍历,哪些还没有.进行模拟即可. problem2 link 模拟一些小数据,可以发现,AB的形状以及要求的区间是下面的样 ...
- 列表与if语句的结合
# 1.判断一个数是否是水仙花数, 水仙花数是一个三位数, 三位数的每一位的三次方的和还等于这个数. \ # 那这个数就是一个水仙花数, 例如: 153 = 1**3 + 5**3 + 3**3 # ...
- 那些离不开的 Chrome 扩展插件
虽然Chrome浏览器是个吃内存的怪兽,但是,它却因为启动速度.调试功能等成为了程序猿的必备浏览器!今天有时间,整理一下自己最常用的一些Chrome扩展吧: 常用网页浏览非开发类扩展: Tamperm ...