Question

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

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

实际上，点击iframe后它甚至不会alert（这与上面的代码相同，但.class_name变为iframe）。

我查看了this question的解决方案，但仍然无效！

This is a jsfiddle应该很好地证明这个问题。

所以我的问题是：为什么Jquery不会识别iframe中的任何内容以及实际的iframe？

编辑：

我知道我无法与其他域上的iframe通信，所以我的jsfiddle不会工作......但它不能在我将其托管在与iframe相同的域上的网站上运行... < / p>

Answer 1

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

当@Max出局时，您可以使用postMessage()或网址片段黑客与其他域中的iframe进行通信， if 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可以在this updated fiddle中使用。

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

我认为您可以在包含页面的load元素上收听iframe事件，但最糟糕的情况是您可以使用setTimeout()或{{ 1}}并等待您正在寻找的元素可用。

Answer 2

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

特别是对于不同的域名，与JS沟通起来要困难得多 - 这应该让你开始：How to communicate between iframe and the parent site?

识别iframe上的操作

2 个答案: