• Cordova插件:InAppBrowser


    版权声明:本文为博主原创文章,转载请注明出处

      

      一、应用场景

      我们在做cordova app开发的时候,可能会经常遇到这种需求。比如在你的app中,你想打开一个URL,但是又不想跳转到系统的浏览器去打开,而是希望直接在app中打开,这个时候就要用到这个插件了。 它会直接在我们的app中生成一个浏览器对象并打开你的网页。

      二、添加插件

      1. 如果你的项目是cordova原生项目,也就是说包含CordovaLib,可以通过命令去安装插件的,那你可以直接进入项目下面,运行: 

      cordova plugin add cordova-plugin-inappbrowser

      这样inappbrowser插件就添加到我们的项目中了。

      2.如果你的项目是改动后的cordova项目,估计大部分公司的cordova项目是改动后的。不可以直接用命令安装, 这个时候就要去手动添加这个插件了。

      手动添加当然也很简单,但是你需要先获得这个插件,你可以通过命令去建一个cordova原生项目(参考我的另一篇文章:Cordova入门系列(一)创建项目)。创建好这个项目我们就可以用命令添加inappbrowser插件了。参考上面步骤1。这样的话我们就获取到了这个插件。

      接着我们要将这个插件手动添加到我们的公司或自己的项目下面。我们有5处地方需要改:

      1). 打开我们创建的原生cordova项目(并且安装了inappbrowser插件)。将src下面的org.apache.cordova.inappbrowser复制到我们自己的项目的src下面。

      2). 将assets/www/plugins/cordova-plugin-inappbrowser,复制到我们自己项目下的assets/www/plugins/下面。

      3). 修改assets/www/cordova_plugins.js,添加对应的inappbrowser的信息。

      4). 修改res/xml/config.xml,添加对应的inappbrowser的<feature />信息。(3.4步可以参考你创建的那个原生cordova项目下面这两个文件都是什么信息。)

      5). 将res下面的资源图片,复制到我们自己的项目下面。

      最近做我们公司的项目,使用这个插件的时候,添加进去后(手动添加的,并不是通过命令添加的),效果没实现,InAppBrowser点击后会自动闪退。发现是由于资源图片没添加导致的。添加drawable/drawable-hdpi/.....下的图片(3个,next, previous, remove)到对应的文件夹即可。

      三、使用这个插件

      使用方法很简单,只需要在我们的js中通过window.open()或者cordova.inappbrowser.open()即可。

      cordova.InAppBrowser.open(URL,target,options)
      window.open(URL,target,options)

      1. URL参数为浏览器跳转的地址;

      2. target的参数有三种:

         _self:如果URL地址在WhiteList中,则用Cordova的WhiteList将其打开;

         _blank:直接在App中将其地址打开;

         _system:则是用手机默认浏览器将新页面打开;

      3. 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,使工具栏显示在窗口的顶部或底部;

      四、举个栗子

      举个简单的例子,假如在你的页面上有一个button,点击它会调用inappbrowser 

    <button onclick="cordova.InAppBrowser.open('http://www.baidu.com', '_blank', 'location=yes')"> Test InAppBrowser </button>
  • 相关阅读:
    2017-2018-1 20155326 实验四 外设驱动程序设计
    2017-2018-1 20155326 20155320《信息安全技术》实验四 木马及远程控制技术
    20155326 2017-2018-1 《信息安全系统设计基础》第六章课上考试题
    6月20日云栖精选夜读:阿里怎么发工资?自研薪酬管理系统首次曝光
    一个成功的研发团队应具备的9大属性
    那些创业的艰辛整理
    明明可以靠脸吃饭偏要靠才华_你身边有女神程序员吗?
    程序猿们_一二三四线城市你更愿意选择去哪里工作?
    微服务架构实践之邮件通知系统改造
    谈谈“僵尸猎手小明”手游兼容性踩到的坑
  • 原文地址:https://www.cnblogs.com/lishuxue/p/6144134.html
Copyright © 2020-2023  润新知