如何将事件绑定到本地 iframe 内的元素？答案

【问题标题】：How can i bind an event to an element inside a local iframe?如何将事件绑定到本地 iframe 内的元素？
【发布时间】：2010-10-14 14:56:37
【问题描述】：

首先，父页面和 iframe 都托管在同一台服务器上（我在 WAMP 上的本地主机），所以同源策略在这里应该不是问题。

我无法让触发器工作。我的 iframe 的 id 为 iframe。

$(window).load(function(){
  //iframe ad hovers
  $('#iframe').contents().find('body div').click(function(){
    alert('do something here');
  });
});

我做错了什么？

【问题讨论】：

缺少单引号 ' 和缺少分号是拼写错误吗？除此之外，它对我来说看起来还不错。
您确定 iframe 内容在 javascript 执行之前已加载吗？请记住，父页面可以在 iframe 页面加载之前调用 is_loaded。
我应该如何调用 is_loaded() 的任何链接/代码？谢谢

标签： javascript jquery iframe

【解决方案1】：

我不确定浏览器是否会将“点击”事件从<iframe> 的窗口上下文传播到包含窗口。加载到<iframe> 的文档是否有自己的 jQuery 副本？如果是这样，你可以试试这个：

$('#iframe').contents().$.find('body div').click(function(){
  alert('do something here);
});

该更改使 <iframe> 窗口中的 jQuery 代码处理该事件。

嗯，我认为@jAndy 是正确的，应该可以按原样工作 - 但是您必须确保框架中的文档已加载。试试这个：

$('#iframe').load(function() {
  $(this).contents().find('body div').click(function() { alert("hi"); });
});

【讨论】：

不幸的是，不能依赖 jquery 在 iframe 页面中。
好吧，我错了——正如 jAndy 在他的评论中所说，这对我来说似乎工作得很好。

【解决方案2】：

你的代码没有错；我认为您正在做的唯一错误是您在父页面加载时要求 iframe 的内容，这意味着在此阶段 iframe 尚未加载。

试试我的快速示例http://jsfiddle.net/UFM44/4/ 它与您的代码相同，但我在单击“现在”链接后触发它。如果然后单击徽标，则可以看到 alert() 消息。

【讨论】：