为iframe添加点击事件处理程序

Question

为iframe添加点击事件处理程序

31

我想使用一个处理程序来捕获 iframe 上的 click 事件，并将该处理程序的参数设置为 iframe 的 id。

我可以通过以下 JavaScript 添加 onClick 事件处理程序，它能正常工作：

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

但在这种情况下，我无法将参数传递给。我尝试在中打印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>

- samach

1

由 deepi 在答案中评论：

你提供的代码（顶部）是工作正常的。但它只有在你点击边框时才起作用，而不是在内部框中。

- Félix Adriyel Gagnon-Grenier

2个回答

19

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

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

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

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

- Wladimir Palant

谢谢Wladimir...你解决了我一半的问题...但是this.id还是不起作用。如果我传递"hello world"，它会被打印出来，但是对于this.id，在警告框中显示为"未定义"。 - samach

没错，那是因为你将监听器添加到了文档上 - 而文档没有ID。你可能想要将它添加到<iframe>元素上，就像你的第一个例子中一样：document.getElementById("myFrame").addEventListener(...); - Wladimir Palant

即使 iframe 来自不同的作用域，您能分配该事件吗？ - Flash Thunder

1

@FlashThunder：不，通常情况下您无法拦截来自不同安全上下文的帧上的点击（如果可以这将是一个安全问题）。 - Wladimir Palant

我找不到.contentDocument方法，我缺少了什么？ - A. Savva

@A.Savva：可能有很多原因，例如访问的内容不是<iframe>元素或访问了还没有加载完成的框架。 - Wladimir Palant

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gaurav Agrawal · Accepted Answer

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>

希望这对你有所帮助...