apicloud apicloud

注册
查看: 9646|回复: 19

[APP开发技巧] 一种获取打开的外部页面 url 的方法

 

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

[APP开发技巧] 一种获取打开的外部页面 url 的方法

 
9646 19 | 发表于 2015-9-20 09:29:50 |阅读模式 | |
本帖最后由 yyyfx 于 2015-9-26 15:41 编辑

这个方法结合了 api.execScript、 api.sendEvent 以及 api.addEventListener。

步骤如下:
1. 在主页面中监听 getUrl 事件,并通过 api.openFrame 打开外部页面(此处是百度);
  1.     apiready = function() {
  2.         var header = $api.byId("header");
  3.         $api.fixIos7Bar(header);
  4.         var headerPos = $api.offset(header);

  5.         api.addEventListener({
  6.             name: 'getUrl'
  7.         }, function(ret, err) {
  8.             if(ret && ret.value){
  9.                 var value = ret.value;
  10.                 api.alert({msg: value.location});
  11.             }            
  12.         });

  13.         api.openFrame({
  14.             name: 'baidu',
  15.             url: 'http://www.baidu.com',
  16.             rect: {
  17.                 x: 0,
  18.                 y: headerPos.h,
  19.                 w: 'auto',
  20.                 h: 'auto'
  21.             }
  22.         });
  23.     };
复制代码

2. 等页面加载完毕,点击主页面的 “获取 url” 的按钮,触发 getFrameUrl 方法
  1. <button class="action" tapmode onclick="getFrameUrl();">获取url</button>
复制代码
  1. function getFrameUrl() {
  2.         var script = "api.sendEvent({name: 'getUrl', extra: {location: window.location}});";

  3.         api.execScript({
  4.             frameName: 'baidu',
  5.             script: script
  6.         });        
  7.     }
复制代码
该方法使用 api.execScript 在打开的页面中执行
  1. "api.sendEvent({name: 'getUrl', extra: {location: window.location}});"
复制代码
从而,将页面的 locaction 信息通过 getUrl 事件发送了出去。

3. 主页面监听到了getUrl 事件,于是我们就获得了外部页面的 location 信息(location.url 包含了 url 信息)。

需要注意的是
在初次打开页面的时候,需要等待 APICloud 的 api 加载完毕。
如果在打开页面的时候,立即点击 “获取 url” 的话,由于此时 api 不存在,是得不到所需要的信息的。

最后,完整的示例代码如下:
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.     <title>test</title>
  7.     <link rel="stylesheet" type="text/css" href="../css/api.css">
  8.     <style>
  9.         #header {
  10.             height: 44px;            
  11.             line-height: 44px;         
  12.             background-color: green;
  13.             position: relative;
  14.         }
  15.         .back {
  16.             background-color: white;
  17.             display: inline-block;
  18.             margin-left: 10px;         
  19.             padding: 5px 10px;
  20.         }
  21.         .action {                     
  22.             background-color: white;            
  23.             margin: 10px 10px 0 0;
  24.             padding: 5px 10px;
  25.             float: right;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div id="header">
  31.         <button class="back" tapmode onclick="api.closeWin();">返回</button>
  32.         <button class="action" tapmode onclick="getFrameUrl();">获取url</button>
  33.     </div>
  34. </body>
  35. <script type="text/javascript" src="../script/api.js"></script>
  36. <script type="text/javascript">
  37.     apiready = function() {
  38.         var header = $api.byId("header");
  39.         $api.fixIos7Bar(header);
  40.         var headerPos = $api.offset(header);

  41.         api.addEventListener({
  42.             name: 'getUrl'
  43.         }, function(ret, err) {
  44.             if(ret && ret.value){
  45.                 var value = ret.value;
  46.                 api.alert({msg: value.location});
  47.             }            
  48.         });

  49.         api.openFrame({
  50.             name: 'baidu',
  51.             url: 'http://www.baidu.com',
  52.             rect: {
  53.                 x: 0,
  54.                 y: headerPos.h,
  55.                 w: 'auto',
  56.                 h: 'auto'
  57.             }
  58.         });
  59.     };

  60.     function getFrameUrl() {
  61.         var script = "api.sendEvent({name: 'getUrl', extra: {location: window.location}});";

  62.         api.execScript({
  63.             frameName: 'baidu',
  64.             script: script
  65.         });        
  66.     }
  67. </script>
  68. </html>
复制代码


1

查看全部评分

马路杀手

UID:8992

主题:
20
帖子:
409
云币:
1210
发表于 2015-9-20 12:23:03 |
   这种能够做什么呢?

主题:
34
帖子:
115
云币:
249
发表于 2015-9-20 12:25:49 |
感谢分享


主题:
34
帖子:
115
云币:
249
发表于 2015-9-20 12:28:59 |
之前看 api.sendEvent 有点蒙圈,这个例子很好

主题:
9
帖子:
197
云币:
1825

APICloud粉丝一周年

发表于 2015-9-20 13:20:55 |
感谢分享!

新手上路

UID:155740

主题:
20
帖子:
46
云币:
64
发表于 2015-9-24 15:34:39 |
获取不到。。。。。

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

 楼主| 发表于 2015-9-24 16:33:51 |
wtane 发表于 2015-9-24 15:34
获取不到。。。。。

请详细描述下,不然很难判断到底是什么原因引起的问题  

新手上路

UID:8597

主题:
14
帖子:
45
云币:
73
发表于 2015-9-26 11:24:28 |
可用, 收藏了. 谢谢!

主题:
0
帖子:
1
云币:
11
发表于 2015-9-26 12:02:23 |
你好,我是新手,可以请教你一个问题吗,Sublime APICloud 插件的安装和使用说明,是这个问题。我在安装真机同步插件的时候,输入install搜索,出不来'Package Control:Install Package'。可以帮我想想办法吗,谢谢了

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

 楼主| 发表于 2015-9-26 15:39:02 |
krystalMISS 发表于 2015-9-26 12:02
你好,我是新手,可以请教你一个问题吗,Sublime APICloud 插件的安装和使用说明,是这个问题。我在安装真 ...

需要先安装好 Package Control,请仔细对照说明进行操作。

12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表