ngCordova插件之InAppBrowser插件的使用

之前详细的写了关于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界面。



你可能感兴趣的:(ionic,ngCordova)