cordova在app内部指定浏览器打开链接插件:cordova-plugin-inappbrowser
原文网址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-plugin-inappbrowser/
要想App里边的链接在指定的内部浏览器或者系统浏览器打开,需要使用cordova-plugin-inappbrowser插件;
当我们在APP中需要跳转到一个特定的浏览器网页时,用这个插件会很方便。
1.首先要在我们的项目中安装这个插件:cordova plugin add cordova-plugin-inappbrowser,不过使用cordova安装,不会将该包显示在package.json文件中,也就是说,当我们再次reset此项目时,这个插件不会自动再次安装了,所以我门需要使用这个命令安装可避免上述情况发生:ionic plugin add cordova-plugin-inappbrowser。如果你已经使用cordova安装过了,需要再使用cordova将插件卸载,然后再用ionic安装;
2.使用方法:
cordova.InAppBrowser.open(URL,target,options)
open()中的URL参数为浏览器跳转的地址;
target的参数有三种:
_self:如果URL地址在WhiteList中,则用Cordova的WhiteList将其打开;
_blank:直接在App中将其地址打开;
_system:则是用手机默认浏览器将新页面打开
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,使工具栏显示在窗口的顶部或底部;
3.简单例子:
$scope.openUrl=function(){
if (!cordova.InAppBrowser) {
return;
}
// toolbar=yes 仅iOS有效,提供关闭、返回、前进三个按钮
// toolbarposition=top/bottom 仅iOS有效,决定toolbar的位置
// closebuttoncaption=关闭 仅iOS有效
cordova.InAppBrowser.open('http://www.baidu.com', '_blank', 'location=no,toolbar=yes,toolbarposition=top,closebuttoncaption=关闭');
}
openUrl是我写的一个方法,在html页面中在相应位置用ng-click去调用这个方法,此时就会触发浏览器跳转的事件,
根据open()中的设置,URL参数是百度的网址;
target参数为"_blank",也就是在App中打开网址的页面;
options参数为iOS系统下会显示toolbar,toolbar的位置在顶部,closebuttoncaption隐藏Done按钮。
cordova在app内部指定浏览器打开链接插件:cordova-plugin-inappbrowser的更多相关文章
- winform 指定浏览器打开链接
Process myProcess = new Process(); myProcess.StartInfo.FileName = "firefox.exe";//&quo ...
- 在UC浏览器打开链接唤醒app,假设没有安装该app,则跳转到appstore下载该应用
在UC浏览器打开链接唤醒app,假设没有安装该app,则跳转到appstore下载该应用 须要在project中设置例如以下: 1.打开project中的myapp-Info.plist文件 2.打开 ...
- 【317】python 指定浏览器打开网页 / 文件
一.python 打开浏览器的方法: 1. startfile方法(打开指定浏览器) import os os.startfile("C:\Program Files\internet ex ...
- [微信跳转浏览器]微信跳转外部浏览器下载APP源码,可以实现自动跳转外部浏览器打开链接
基于微信后端开发了一款微信推广助手,使用了本程序生成的链接,用户在微信任意环境下点击链接或者扫描二维码,可以实现直接跳转手机默认浏览器并打开指定网页. 我们开发的此款跳转产品,应用范围广泛.除了下载A ...
- 微信网页浏览器打开链接后跳转到其他浏览器下载APK文件包
做微信营销活动或者APK下载推广时候,是无法直接下载,做到微信中正常使用呢?这就要借助一些工具来实现有效的操作. 安卓手机的话是通过点击链接,直接跳转出微信.自动打开手机默认的浏览器.但是这个方法IO ...
- 拦截webview调用系统浏览器打开链接
给WebView设置自定义的WebViewClient即可 webview.setWebViewClient(new WebViewClient(){ @Override public boolean ...
- phonegap中使用自带浏览器打开链接
<center><a id="ssl2" href="#" onclick="window.open('http://127.0.0 ...
- JS实现让其他浏览器自动转至微信浏览器打开链接
//判断是否是pc function is_pc() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUser ...
- 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
不管是app的下载链接还是普通文件的链接在微信内置浏览器或者QQ内置浏览器都会被屏蔽.这是微信对第三方下载域名实施的拦截政策.被拦截了用户在微信内打开就会提示“已停止访问该网页”. 那么当我们遇到这个 ...
随机推荐
- Hadoop集群基准测试
hadoop jar ./share/hadoop/mapreduce/hadoop-mapreduce-client-jobclient-2.2.0-tests.jar TestDFSIO -wri ...
- 15 Examples To Master Linux Command Line History
When you are using Linux command line frequently, using the history effectively can be a major produ ...
- Android Studio 错误 Duplicate files copied in APK META-INF/LICENSE.txt
1 .Duplicate files copied in APK META-INF/LICENSE.txt android { packagingOptions { exclude 'META-I ...
- SAE/ISO standards for Automotive
On-Board Diagnostics J1962 Diagnostic Connector Equivalent to ISO/DIS 15031-3: December 14, 2001J201 ...
- Java数据结构之树和二叉树
从这里开始将要进行Java数据结构的相关讲解,Are you ready?Let's go~~ Java中的数据结构模型可以分为一下几部分: 1.线性结构 2.树形结构 3.图形或者网状结构 接下来的 ...
- Celery学习笔记
转载请注明出处:点我 我的第一篇博客!嘿嘿! 在公司实习,接触到的第一个项目就用到了Celery,之前是完全没有接触过Celery这玩意,然后花了点时间仔细的研究了下怎么用.在学习过程中也遇到了些问题 ...
- 微信公共服务平台开发(.Net 的实现)13-------网页授权(下 :C#代码的实现 )
接着上次的理论,我们这次来研究用代码实现“网页授权获取用户基本信息”,首先我们需要一个链接指向微信的授权页面,在微信开发平台中已经说了,这个链接必须在微信客户端中打开,那么我们就干脆使用文本消息来完成 ...
- Android语音搜索
前言 在现有的软件的搜索框中基本上都会加上语音搜索的图标,以方便用户输入.我们xxxx的搜索框其实也可以借鉴这样的输入方式,提高用户体验.语音识别有3种方式实现①使用intent调用语音识别程序;②通 ...
- WEB的相关知识总结
JS-->OOP/Module, DOM, JSON, AJAX------------------><script>, script.js的内容 HTML/JS/CSS HT ...
- TP复习3
## ThinkPHP 3.1.2 CURD特性#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲: 一.ThinkPHP 3 的CURD介绍 (了解) 二. ...