1

所以我有一个 iframe，我希望能够alert在点击 iframe 中的特定按钮时执行类似的操作。但是下面的代码不起作用

$('.class_name').click(function(){
    alert('Clicked');    
});

实际上，即使alert单击 iframe 也不会（与上面的代码相同，但 where.class_name变为iframe）。

我从this question查看了解决方案，但它仍然不起作用！

这是一个 jsfiddle，应该可以很好地展示这个问题。

所以我的问题是：为什么当点击 iframe 内的任何内容以及实际的 iframe 时，Jquery 无法识别？

编辑：

我知道我无法与不同域上的 iframe 进行通信，所以我的 jsfiddle 无法工作......但它在我将它托管在与 iframe 相同的域上的网站上不起作用......

4

2 回答 2

2

如果你的 iframe 来自不同的域，就像你的小提琴一样，那么你的 JavaScript 代码根本无法访问它的内容，对不起！

正如@Max 指出的那样，您可以使用postMessage()URL 片段 hack 与不同域中的 iframe 进行通信，如果该 iframe 中有代码来处理来自该端的通信。

使用来自 tumblr.com 的 iframe，您可以查看他们的文档，看看它是否谈到在 iframe 中使用此页面并跨域障碍与其通信。

现在，如果您正在谈论与您的页面来自同一域的 iframe，那么这很容易。给定一个iframe名为 的变量中的元素myframe，您可以使用myframe.contentWindow它来获取它的window对象并myframe.contentWindow.document获取它的document对象。从那里你可以做你需要的事情。例如：

var $myframe = $('#myframe'),
    myframe = $myframe[0],
    myframewin = myframe.contentWindow,
    myframedoc = myframewin.document;

$(myframedoc).find('a').on( 'click', function() {
    alert( 'Clicked!' );
});

在主页中使用 jQuery 的副本来访问 iframe 中的内容时，您可能仍然会遇到一些麻烦，但使用最新版本应该会有更好的运气。在最坏的情况下，您可以为此使用本机 DOM 事件和方法，但 jQuery 确实在这个更新的 fiddle中工作。

这个小提琴使用 document.write 将内容放入 iframe 中，但访问框架的 jQuery 代码将是相同的。当然，要注意的一件事是，当您尝试访问 iframe 时，它​​是否已完全加载。

我认为您可以在包含页面中的元素上侦听load事件iframe，但最坏的情况是您可以使用setTimeout()或setInterval()等待您正在寻找的元素可用。

于 2013-06-20T22:03:56.787 回答
0

因为 iFrame 是一个完全不同的框架——它是出于安全考虑而完成的。例如，假设您可以在 iFrame 中加载银行登录页面，并使用 js 获取字段值。

特别是对于不同的域，与 JS 进行通信要困难得多——这应该让你开始：如何在 iframe 和父站点之间进行通信？

于 2013-06-20T22:04:34.050 回答