我想向iframe 添加点击事件。我用this example 得到了这个：
$(document).ready(function () {
$('#left').bind('click', function(event) { alert('test'); });
});
<iframe src="left.html" id="left">
</iframe>
但不幸的是，什么也没发生。
当我用另一个元素（例如按钮）对其进行测试时，它可以工作：
<input type="button" id="left" value="test">
【问题讨论】：
标签： javascript jquery iframe
您可以将点击附加到 iframe 内容：
$('iframe').load(function(){
$(this).contents().find("body").on('click', function(event) { alert('test'); });
});
注意：这只有在两个页面在同一个域中时才有效。
【讨论】：
$($("iframe")[0].contentWindow).on('contextmenu', function(e) { alert('test'); });
两种解决方案：
.iframeWrapper 元素上使用:after
pointer-events:none; 一个 iframe:after
很简单。 iframe 包装器有一个:after（透明）伪元素，具有更高的 z-index - 这将有助于包装器注册点击：
jQuery(function ($) { // DOM ready
$('.iframeWrapper').on('click', function(e) {
e.preventDefault();
alert('test');
});
});.iframeWrapper{
display:inline-block;
position:relative;
}
.iframeWrapper:after{ /* I have higher Z-index so I can catch the click! Yey */
content:"";
position:absolute;
z-index:1;
width:100%;
height:100%;
left:0;
top:0;
}
.iframeWrapper iframe{
vertical-align:top;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iframeWrapper">
<iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>pointer-events:none;
无法处理来自 iframe 外部的点击来自外部资源（如果 iframe 不在您的域中）。
您只能在 'called into iframe' 页面内创建该函数，而不能在 iframe-hosting 页面内创建。
怎么做：
iframe到一个div中pointer-events:none; 使点击“通过”您的 iframe
DIV（iframe 父元素）上使用 jQuery 定位点击次数jQuery(function ($) { // DOM ready
$('.iframeWrapper').on('click', function(e) {
e.preventDefault();
alert('test');
});
});.iframeWrapper{
display:inline-block;
position:relative;
}
.iframeWrapper iframe{
vertical-align:top;
pointer-events: none; /* let any clicks go trough me */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iframeWrapper">
<iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>NOTA BENE：
pointer-events 视而不见：\【讨论】：
position... :) （我们应该注意到这一点）；）开玩笑，谢谢
我让它工作，但只有在将它上传到主机之后。我想 localhost 也可以正常工作。
外层
<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
var myFrame = document.getElementById("myFrame");
$(myFrame.contentWindow.document).find("div").on("click", function () { alert("clicked"); });
});
</script>
<body>
<iframe id="myFrame" src="inner.htm"></iframe>
</body>
</html>
内部
<html>
<head>
<style>
div {
padding:2px;
border:1px solid black;
display:inline-block;
}
</style>
</head>
<body>
<div>Click Me</div>
</body>
</html>
【讨论】：
$(document).ready(function () {
$('#left').click(function(event) { alert('test'); });
});
<iframe src="left.html" id="left">Your Browser Does Not Support iframes</iframe>
脚本必须完全从 iframe 运行。我会推荐另一种调用内容的方法，例如 php。
iframe 真的不值得麻烦。
【讨论】：
实际的问题是，click 事件没有绑定到 iframe 的 DOM 并且 bind() 已被弃用，使用.on() 绑定事件。尝试使用以下代码，您会发现 iframe 的可点击边框会收到该警报。
$('#left').on('click', function(event) { alert('test'); });
那么如何完成呢？
您应该怎么做，在 iframe 页面上创建一个函数，然后从该 iframe 页面调用该函数。
【讨论】：