Question

我的移动网站中嵌入了iframe，iframe的内容包含带标记的图片。我想听一下用户点击iframe中图片的事件，然后重定向到新页面。

例如：

<!-- This is the content of the iframe -->
<!-- The hosting location is http://www.example.com/iframe.html -->
<a href="http://www.google.com" target="_blank">
<img src="http://www.example.com/image01.jpg">
</a>

然后

<!-- This is the content of the mobile site -->
<html>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<iframe src="http://www.example.com/iframe.html"></iframe>
</html>

因此，当用户点击iframe中的图片时，他将被重定向到http://www.example.com，我想听这个事件，我可以动态运行一些javascript函数。

有什么建议吗？感谢。

9Dec2014备注：

有一点需要注意的是，移动网站的内容会动态传递到具有不同域的多个移动网站。所以window.parent不起作用，因为iframe内容文件和html文件不在同一个域中。

我还检查了postMessage（data，targetDomain）方法。但是，它只能在iframe内容文件的域和html文件已知的情况下工作。（在我的情况下，html文件的域名不知道，因为它是在具有不同域的多个移动站点上动态传递的。）

任何解决方案??

Answer 1

您可以使用window.parent。

在您的iframe页面中：

$('a').on("click", function(e) {
  window.parent.doStuff();
});

在您的主页中：

function doStuff(){ ... }

听取iframe事件 - 打开网址

1 个答案: