将Click事件处理程序添加到iframe

sam*_*ach 23 javascript iframe onclick addeventlistener

我想处理click一个iframe带有处理程序的事件,该处理程序将iframeid作为参数.

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

iframe.document.addEventListener('click', clic, false);
Run Code Online (Sandbox Code Playgroud)

但在这种情况下,我无法传递参数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>
Run Code Online (Sandbox Code Playgroud)

Gau*_*wal 24

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>
Run Code Online (Sandbox Code Playgroud)

我希望它对你有所帮助....

  • 也不适用于不同的域名. (9认同)
  • 仅当当前网站具有相同的iframe协议时才有效(如果一个是http而另一个是https则不工作) (3认同)
  • 如果 iframe 不能跨域工作,那么就违背了使用 iframe 的目的。 (2认同)

Wla*_*ant 15

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

iframe.document.addEventListener('click', function(event) {clic(this.id);}, false);
Run Code Online (Sandbox Code Playgroud)

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

document.getElementById("myFrame").contentDocument.addEventListener(...);
Run Code Online (Sandbox Code Playgroud)