zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    POJ 2236 Wireless Network(并查集)
    POJ 2010 Moo University
    POJ 3614 Sunscreen(贪心,区间单点匹配)
    POJ 2184 Cow Exhibition(背包)
    POJ 1631 Bridging signals(LIS的等价表述)
    POJ 3181 Dollar Dayz(递推,两个long long)
    POJ 3046 Ant Counting(递推,和号优化)
    POJ 3280 Cheapest Palindrome(区间dp)
    POJ 3616 Milking Time(dp)
    POJ 2385 Apple Catching(01背包)
  • 原文地址:https://www.cnblogs.com/lishuxue/p/6144134.html
Copyright © 2011-2022 走看看