首 页  -  技术分享  - cordova插件:inappbrowser

cordova插件:inappbrowser

分享者:毛亚枝     2016-03-17

要想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按钮。