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

时间:2011-06-23 10:22:08

标签: javascript iframe onclick addeventlistener

我想在click处理iframe事件,其处理程序将iframe的id作为参数。

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

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

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

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 个答案:

答案 0 :(得分: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>

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

答案 1 :(得分:15)

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

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

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

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