将子iframe中的事件附加到父窗口中的处理程序

I don't have access to this iframe's source directly, so I would like to do this, if it's possibly this way.

我不能直接访问iframe的源代码，所以我想这样做，如果可能的话。

I have an iframe generated by JS:

我有一个JS生成的iframe:

<iframe name="temp_iframe" width="100%" height="95%" src="'+the_url+'"></iframe>

And inside is a submit button and a cancel button. The submit button works fine, but I want the cancel button to close this modal that is containing the iframe... I also want the submit button to send, then close the modal. Normally this would be easy, but im not sure how to setup an event in the parent window to a child DOM element of the iframe that affects the child's parent, the main window.

里面有一个提交按钮和一个取消按钮。提交按钮工作正常，但是我想要取消按钮关闭包含iframe的这个模态…我还希望提交按钮发送，然后关闭模式。通常这很容易，但是我不确定如何在父窗口中设置一个事件到iframe的子DOM元素，该元素会影响子框架的父窗口主窗口。

E.g. if this wasn't in an iframe and in jQuery:

如果这不是在iframe和jQuery中:

$('[name=temp_iframe] button').live('click',function(){
    alert('click');
    return false;
});

EDIT: And also, it's on the same domain!

编辑:而且，它在同一个领域!

2 个解决方案

#1

Use contents() to access the Document object inside an iframe. Note that there are in general problems with using a jQuery library in one document to manipulate another document and it should in general be avoided. However, in the case of binding events it does work.

使用contents()访问iframe中的Document对象。注意，在一个文档中使用jQuery库操作另一个文档通常存在一些问题，一般应该避免使用jQuery库。然而，在绑定事件的情况下，它确实起作用。

$('[name=temp_iframe]').contents().find('button').click(function() {
    alert('click');
});

This requires that the iframe and its contents are loaded, so do it in a $(window).load() handler if necessary. You can't live/delegate across documents, as events don't propagate from a child document into its parent.

这需要加载iframe及其内容，所以如果需要，请在$(window).load()处理程序中加载。不能跨文档进行活动/委托，因为事件不会从子文档传播到其父文档。

#2

In plain JavaScript it would be:

简单地说，它应该是:

document.getElementById("frameId").contentDocument.getElementById("buttonId").click();

If you need to search elements by attribute value and tag name, you can:

如果需要按属性值和标签名搜索元素，可以:

document.querySelectorAll('[name=temp_iframe]')[0].contentDocument.getElementsByTagName('button')[0].click();

#1

$('[name=temp_iframe]').contents().find('button').click(function() {
    alert('click');
});