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

IT技术 javascript jquery html events iframe
2021-01-28 11:44:31

我无法直接访问这个 iframe 的源代码,所以我想这样做,如果可能的话。

我有一个由 JS 生成的 iframe:

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

里面是一个提交按钮和一个取消按钮。提交按钮工作正常,但我希望取消按钮关闭这个包含 iframe 的模式......我也希望提交按钮发送,然后关闭模式。通常这很容易,但我不确定如何在父窗口中将事件设置为影响子父窗口的 iframe 子 DOM 元素。

例如,如果这不在 iframe 和 jQuery 中:

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

编辑:而且,它在同一个域上!

2个回答

使用contents()访问文档对象的iframe内。请注意,在一个文档中使用 jQuery 库来操作另一个文档通常会出现问题,通常应该避免这种情况。但是,在绑定事件的情况下,它确实有效。

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

这需要加载 iframe 及其内容,因此$(window).load()如有必要,请在处理程序中执行此操作您不能live/delegate跨文档,因为事件不会从子文档传播到其父文档。

完美的!谢谢!我把它放在一个 .load('iframe') 中
2021-04-13 11:44:31

在纯 JavaScript 中,它将是:

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

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

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