将点击事件添加到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

  1. 使用:after .iframeWrapper元素之后
  2. 使用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页面调用该函数。