cordova插件: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按钮。

时间: 2024-10-12 16:12:04

cordova插件:inappbrowser的相关文章

cordova插件之org.apache.cordova.inappbrowser

本文不介绍该插件的使用org.apache.cordova.inappbrowser,可以自行参考官方文档http://plugins.cordova.io/#/package/org.apache.cordova.inappbrowser. 本文介绍自己的特殊应用 需求: 1.开发环境:sencha touch 要求在web app中能够呈现复杂格式的工程报表,例如如下: 2.要求能够自由缩放先写报表(双击实现放大缩小) 3.填写完成的数据要进入sqlite 解决思路: 1.采用cordova

理清cordova插件的调用流程

从调用的角度看流程  前端调用(clobbers)-->cordova_plugins.js(clobbers对应插件id和插件文件所在的路径)-–>js部分(配置着插件的名字,已经插件里面都有的方法)-->config.xml(根据插件的名字找到对应的插件原生文件的包名)-->原生(根据匹配到的方法名,来调用原生方法,另外也可以获取到js传递下来的参数) 简单说:前端调用-->桥梁:(cordova_plugin.js clobbers)-->js文件-->桥梁

【No.4 Ionic】修改 cordova 插件

在使用 cordova 过程 使用的插件 有可能不能满足个人需求,就需要修改,下面就直接说说步骤 插件结构 我用 cordova-plugin-inappbrowser 插件 讲解 在目录中有个 src目录,然后 有android  和 ios 目录,直接按需修改就行了 . |-- CONTRIBUTING.md |-- LICENSE |-- NOTICE |-- package.json |-- plugin.xml |-- README.md |-- RELEASENOTES.md |--

如何给Ionic写一个cordova插件

写一个cordova插件 之前由javaWeb转html5开发,由于面临新技术,遂在适应的过程中极为挣扎,不过还好~,这个过程也极为短暂:现如今面临一些较为复杂的需求还会有一丝丝头痛,却没有一开始那么强烈了... 在正式写下文之前,我先感谢公司大boss:王总,感谢他让我进入了一个有挑战性的技术公司 并在这个过程中一直鼓励我不断汲取新技术,同时也指正了我在开发中的一些不太好的习惯,十分感谢! 再~,感谢在开发中给予我太多帮助的杜勇以及孙金~,不论是需求讨论还是具体开发阶段都会给予一些十分有用的思

Visual Studio的 Apache Cordova 插件CTP3.0发布!

北京时间12号晚23点开始的Connect()活动上,微软发布了一系列激动人心的消息! .NET开源了!以后.NET将可在Linux和Mac OS平台上运行! VS免费了!!如果你是学生,个人开发者,初创企业,那么你将可以使用Visual Studio Community 2013!免费! Visual Studio 2015集成了 Clang 和 LLVM,这意味着什么,意味你可以在VS里头编译iOS程序了! Visual Studio 2015还自带了Android模拟器!可以告别那个渣爆了

Ionic2使用第三方cordova插件(非Ionic2官方支持的native cordova插件)

Ionic2官方提供了丰富的native cordova插件,比如:Camera.Device等等,使用方式也很简单: 1.添加插件支持:ionic plugin add cordova-plugin-device; 2.在页面ts文件中声明: import { Device } from 'ionic-native'; 3.在相关方法中调用: getDeviceInfo(){ console.log('Device UUID is: ' + Device.uuid); } Ionic2nati

AngularJS Cordova插件介绍

ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和扩展,让开发者可以方便的在HybridApp开发中调用设备能力,即可以在AngularJs代码中访问设备能力Api. 根据我的经验,在cordova插件的sucess和error js回调方法中,是无法使用 angularjs的$scope对象和注入的方法的,只能访问全局的方法和变量,这样会导致很多麻烦,必须使用传统的js方法写很多难看的代码.使用ngCordova应该可以解决这个问题. 目前ngCord

混合开发-利用Cordova插件实现HTML5 与 原生代码的连接

主要利用的就是通过Cordova这个东西, 进行HTML5 与 iOS断值得传递 列子:把HTML5 获取的日期同步到iOS系统的日历中去 1. 原生代码:.h.m 提供一个接口文件 主要代码: - (BOOL)saveEventToCalender:(NSString *)title content:(NSString *)contentTitle year:(NSString *)year date:(NSString *)date time:(NSString *)time { // 定义

Cordova-在现有iOS工程自动化接入Cordova插件

模拟Cordova插件命令 自己编写脚本,了解cordova添加插件做了哪些事情. 上一篇文章了解到,web与native的交互主要是cordova.js中的exec方法调用,触发交互事件.UIWebView已经成为过去时,忽略,这里只说wkwebview,exec调用wk的configuration.userContentController中注册的事件cordova,触发回调userContentController:didReceiveScriptMessage: 先聊web端,再聊iOS

cordova插件使用集合

1.获取当前应用的版本号 cordova plugin add cordova-plugin-app-version 2.获取网络连接信息 cordova plugin add cordova-plugin-network-information 3.获取GPS数据 cordova plugin add cordova-plugin-geolocation 4.Visual Notification(可视化消息提醒) cordova plugin add cordova-plugin-dialo