码迷,mamicode.com
首页 > 移动开发 > 详细

cordova插件(一)-inappbrowser

时间:2020-08-10 20:57:52      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:lis   this   bar   bin   根目录   lse   tor   target   shel   

插件介绍

博主这里讲的是cordova-plugin-inappbrowser这个插件,它可以帮我们实现这样的一个功能,就是在我们的混合app里面,使用app内置浏览器打开一个页面,而不用内置浏览器去打开。

使用插件

下面我们开始讲解inappbrowser插件的使用。

安装插件

在我们的项目根目录执行下面的命令。

cordova plugin add cordova-plugin-inappbrowser

查看命令执行结果:

技术图片

js修改

我们这里实现的是这样的一个功能,当cordova容器加载完毕的时候,就使用app内置浏览器打开一个网址。

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener(‘deviceready‘, this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function() {
        this.receivedEvent(‘deviceready‘);
    },
    receivedEvent: function(id) {
        var url = ‘https://www.cnblogs.com/chenhaoblog/‘;
		var target = ‘_blank‘;
		var options =   ‘location=no‘;
        //使用App内置浏览器
        cordova.InAppBrowser.open(url, target, options);
    }
};
app.initialize();

参数说明:

  • url是我们需要打开的链接
  • target的参数有三种, _blank:直接在App中将其地址打开。_system:则是用手机默认浏览器将新页面打开;_self:如果URL地址在WhiteList中,则用Cordova的WhiteList将其打开;
  • location:设置为yes或no来打开或关闭插件的locationbar;

查看界面

修改js文件之后,需要重新进行app的打包与签名,并进行app的安装。

技术图片

注意点

这里需要注意的是使用这种方式打开的页面,会具有比较强的缓存。我们将服务器上的文件进行删除了之后,打开我们的app还是能够正常访问。

博主微信公众号

技术图片

cordova插件(一)-inappbrowser

标签:lis   this   bar   bin   根目录   lse   tor   target   shel   

原文地址:https://www.cnblogs.com/chenhaoblog/p/13472104.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!