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

IT技术 javascript iframe onclick addeventlistener
2021-01-31 07:19:01

我想click使用一个iframeiframeid 作为参数的处理程序来处理事件

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

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

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

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>
2个回答

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 不能跨域工作,则无法达到使用 iframe 的目的。
2021-03-14 07:19:01
它仅在当前网站具有与 iframe 相同的协议时才有效(如果一个是 http 而另一个是 https 则不起作用)
2021-04-03 07:19:01

您可以使用闭包来传递参数:

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

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

document.getElementById("myFrame").contentDocument.addEventListener(...);
谢谢 wladimir....u 解决了我的一半问题...但 this.id 仍然无法正常工作。如果我通过“你好世界”然后它会被打印但是对于 this.id 它在警告框中显示“未定义”:S
2021-03-16 07:19:01
即使 iframe 来自不同的范围,您也可以分配该事件吗?
2021-03-22 07:19:01
@FlashThunder:不,您通常无法拦截来自不同安全上下文的帧点击(如果可以,那将是一个安全问题)。
2021-03-25 07:19:01
.contentDocument没有办法。我错过了什么?
2021-04-03 07:19:01
是的,那是因为您将侦听器添加到文档中 - 并且该文档没有 ID。您可能希望将其添加到<iframe>元素中,就像在您的第一个示例中一样:document.getElementById("myFrame").addEventListener(...);
2021-04-08 07:19:01