PhoneGap中文网

标题: phonegap 3.5 使用自带浏览器打开链接 [打印本页]
作者: admin    时间: 2014-6-23 22:17
标题: phonegap 3.5 使用自带浏览器打开链接
因为项目需求有一个广告的功能，开始直接在phonegap中打开。感觉怪怪的。

后来发现pheongap有个   inappbrowser 的 plugin api 果断去看了一下。感觉还不错。

先上【 原版api链接】


首先在cmd中的操作大概写一下

  1. //先进入项目对应的目录
  2. cd workspace/test

  4. //添加cordova inappbrowser插件
  5. cordova plugin add org.apache.cordova.inappbrowser
复制代码

进入 index.html引入相关文件 和写入js 操作

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <!-- 引入jqmobi的一些东西就省略了 -->

  8. <!-- 把cordova.js  和 cordova_plugins.js 都引入 -->
  9. <script type="text/javascript" src="cordova.js"></script>
  10. <script type="text/javascript" src="cordova_plugins.js"></script>

  12. </head>
  13. <body>


  16. <a href="#" class="ad_open_browser">打开广告</a>

  18. <script type="text/javascript">
  19. /* phonegap初始化 */
  20. /* 要在codova 加载完成之后再执行相关的方法 */
  21. //我这里的广告路径需要改变的。所以使用ajax获取。


  24. function onDeviceReady(){

  26.     //广告链接路径
  27.     var ad_path;

  29.     //广告图数据设置
  30.     var main_ad_opts = {
  31.         url:BANNERAPI,
  32.         type:"GET",
  33.         dataType:"jsonp",
  34.         jsonp:"callback",
  35.         jsonpCallback:"callback",
  36.         success:function(data){
  37.             ad_path = data.url;
  38.             console.log("广告链接加载成功");
  39.         },
  40.         error:function(){
  41.             console.log("加载失败");
  42.         }
  43.     }

  45.     //广告图数据
  46.     $.ajax( main_ad_opts );

  48.     //我这里使用的是点击打开。可以自行修改
  49.     $(".ad_open_browser").bind("tap",function(){
  50.         console.log( '进来了' );
  51.         window.open( ad_path, '_blank', 'location=yes');
  52.     })
  53. }
  54. document.addEventListener("deviceready", onDeviceReady, false);

  56. </script>
  57. </body>
  58. </html>
复制代码

  2. //然后记得回到项目目录重新 build 一下

  4. cordova build
复制代码


本文来自：http://www.qdkf.net/index.php/archives/18/

感谢：por 分享


作者: 517229090    时间: 2015-5-11 16:32
好帖就是要顶 学习学习
作者: 517229090    时间: 2015-5-11 16:35
未来属于html5 phonegap 微信 wap全部搞定



欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2