将点击事件处理程序添加到 iframe答案

【问题标题】：Adding click event handler to iframe将点击事件处理程序添加到 iframe
【发布时间】：2011-06-23 10:22:07
【问题描述】：

我想使用以iframe 的 id 作为参数的处理程序来处理 iframe 上的 click 事件。

我可以通过 JavaScript 添加一个onClick 事件处理程序，如下所示，它工作正常：

iframe.document.addEventListener('click', clic, false);

但在这种情况下，我无法将参数传递给 clic()。我尝试在clic() 中打印this.id，但没有结果。

onClick HTML 属性根本不起作用，没有调用处理程序。

<html>
<head>
<script type="text/javascript">
function def() {
    myFrame.document.designMode = 'on';
}
function clic(id) {
    alert(id);
}
</script>
</head>
<body onLoad="def()">
<iframe id="myFrame" border="0" onClick="clic(this.id)"></iframe>
</body></html>

【问题讨论】：

deepi 在回答中评论：your code (what you gave on top) is working fine. But it's working when you click exactly on the border not in side box

标签： javascript iframe onclick addeventlistener

【解决方案1】：

iframe 没有 onclick 事件，但我们可以通过使用 iframe 的 onload 事件和像这样的 javascript 来实现它...

function iframeclick() {
document.getElementById("theiframe").contentWindow.document.body.onclick = function() {
        document.getElementById("theiframe").contentWindow.location.reload();
    }
}


<iframe id="theiframe" src="youriframe.html" style="width: 100px; height: 100px;" onload="iframeclick()"></iframe>

希望对你有帮助....

【讨论】：

只有在当前网站与 iframe 协议相同的情况下才有效（如果一个是 http 而另一个是 https 则不工作）
如果 iframe 不能跨域工作，则违背了使用 iframe 的目的。

【解决方案2】：

你可以使用闭包来传递参数：

iframe.document.addEventListener('click', function(event) {clic(this.id);}, false);

但是，我建议您使用更好的方法来访问您的框架（我只能假设您正在使用 DOM0 方式通过它们的名称访问框架窗口 - 这只是为了向后兼容而保留）：

document.getElementById("myFrame").contentDocument.addEventListener(...);

【讨论】：

感谢 wladimir....你解决了我的一半问题...但 this.id 仍然无法正常工作。如果我通过“hello world”，那么它会被打印出来，但是对于 this.id，它会在警告框中显示“未定义”：S
对，那是因为您将侦听器添加到文档中 - 并且文档没有 ID。您可能希望将其添加到 <iframe> 元素中，就像在您的第一个示例中一样：document.getElementById("myFrame").addEventListener(...);
即使 iframe 来自不同的范围，您能否分配该事件？
@FlashThunder：不，您通常不能拦截来自不同安全上下文的帧的点击（如果可以的话，那将是一个安全问题）。
我没有.contentDocument 方法。我错过了什么？