将点击事件添加到iframe
我想添加一个点击事件到一个iframe 。 我用这个例子 ，得到这个：
$(document).ready(function () { $('#left').bind('click', function(event) { alert('test'); }); }); <iframe src="left.html" id="left"> </iframe>
但不幸的是没有发生。
当我用另一个元素（例如一个button）testing它时，它是有效的：
<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/
两种解决scheme
- 使用
:after.iframeWrapper元素之后 - 使用
pointer-events:none;一个iframe
1.使用:after
非常简单。 iframe包装器具有:after具有较高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>
我得到它的工作，但只有上传到主机后。 我想本地主机也能正常工作。
外
<html> <script src="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。
iframes是不值得的麻烦。
实际的问题是，click事件没有绑定到iframe的DOM，bind（）已经被弃用，使用.on()绑定事件。 尝试下面的代码，你会发现获取该警报的iframe点击的边界。
$('#left').on('click', function(event) { alert('test'); });
该问题的演示
那么如何完成它？
你应该做的是，在iframe页面上创build一个函数，并从该iframe页面调用该函数。
