我想将点击事件添加到iframe. 我使用了这个例子并得到了这个：
$(document).ready(function () {
$('#left').bind('click', function(event) { alert('test'); });
});
<iframe src="left.html" id="left">
</iframe>
但不幸的是，什么也没发生。
当我用另一个元素（例如按钮）测试它时，它可以工作：
<input type="button" id="left" value="test">
您可以将点击附加到 iframe 内容：
$('iframe').load(function(){
$(this).contents().find("body").on('click', function(event) { alert('test'); });
});
注意：这只有在两个页面都在同一个域中时才有效。
现场演示：http: //jsfiddle.net/4HQc4/
两种解决方案：
:after在.iframeWrapper元素上使用pointer-events:none;一个 iframe:after很简单。iframe 包装器有一个具有更高 z-index:after的（透明）伪元素- 这将有助于包装器注册点击：
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 不在您的域中）。
您只能在“调用 iframe”页面中创建该函数，而不是在iframe 托管页面中创建该函数。
怎么做：
iframe成一个 diviframe使用 CSSpointer-events:none;jQuery您的包装DIV（iframe父元素）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>通知：
pointer-events:\我让它工作，但只有在将它上传到主机之后。我想 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 页面调用该函数。