一种获取打开的外部页面 url 的方法

yyyfx

本帖最后由 yyyfx 于 2015-9-26 15:41 编辑

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

步骤如下：
1. 在主页面中监听 getUrl 事件，并通过 api.openFrame 打开外部页面（此处是百度）；

apiready = function() {
var header = $api.byId("header");
$api.fixIos7Bar(header);
var headerPos = $api.offset(header);
api.addEventListener({
name: 'getUrl'
}, function(ret, err) {
if(ret && ret.value){
var value = ret.value;
api.alert({msg: value.location});
}
});
api.openFrame({
name: 'baidu',
url: 'http://www**.**',
rect: {
x: 0,
y: headerPos.h,
w: 'auto',
h: 'auto'
}
});
};

复制代码

2. 等页面加载完毕，点击主页面的 “获取 url” 的按钮，触发 getFrameUrl 方法

<button class="action" tapmode onclick="getFrameUrl();">获取url</button>

复制代码

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

复制代码

该方法使用 api.execScript 在打开的页面中执行

"api.sendEvent({name: 'getUrl', extra: {location: window.location}});"

复制代码

从而，将页面的 locaction 信息通过 getUrl 事件发送了出去。

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

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

最后，完整的示例代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>test</title>
<link rel="stylesheet" type="text/css" href="../css/api.css">
<style>
#header {
height: 44px;
line-height: 44px;
background-color: green;
position: relative;
}
.back {
background-color: white;
display: inline-block;
margin-left: 10px;
padding: 5px 10px;
}
.action {
background-color: white;
margin: 10px 10px 0 0;
padding: 5px 10px;
float: right;
}
</style>
</head>
<body>
<div id="header">
<button class="back" tapmode onclick="api.closeWin();">返回</button>
<button class="action" tapmode onclick="getFrameUrl();">获取url</button>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
var header = $api.byId("header");
$api.fixIos7Bar(header);
var headerPos = $api.offset(header);
api.addEventListener({
name: 'getUrl'
}, function(ret, err) {
if(ret && ret.value){
var value = ret.value;
api.alert({msg: value.location});
}
});
api.openFrame({
name: 'baidu',
url: 'http://www**.**',
rect: {
x: 0,
y: headerPos.h,
w: 'auto',
h: 'auto'
}
});
};
function getFrameUrl() {
var script = "api.sendEvent({name: 'getUrl', extra: {location: window.location}});";
api.execScript({
frameName: 'baidu',
script: script
});
}
</script>
</html>

复制代码

浪费

这种能够做什么呢？

平凡之家

感谢分享

平凡之家

之前看 api.sendEvent 有点蒙圈,这个例子很好

app爱好者

感谢分享！

wtane

获取不到。。。。。

yyyfx

wtane 发表于 2015-9-24 15:34
获取不到。。。。。

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

zcphp

可用, 收藏了. 谢谢!

krystalMISS

你好，我是新手，可以请教你一个问题吗，Sublime APICloud 插件的安装和使用说明，是这个问题。我在安装真机同步插件的时候，输入install搜索，出不来'Package Control:Install Package'。可以帮我想想办法吗，谢谢了

yyyfx

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

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

请参考
http://docs.apicloud.com/APICloud/sublime-apicloud-plugin