将Click事件添加到iframe

Question

我想在一个点击事件中添加一个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">

Answer 1

您可以将点击附加到iframe内容:

$('iframe').load(function(){
  $(this).contents().find("body").on('click', function(event) { alert('test'); });
});

注意:这仅在两个页面位于同一域中时才有效.

现场演示:http://jsfiddle.net/4HQc4/

Answer 2

两种解决方案

1. 使用:after一对.iframeWrapper元素
2. 使用pointer-events:none;一个iframe

1.使用 :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>

2.使用 pointer-events:none;

点击不能从外部资源的iframe 外部处理(如果iframe不在您的域中).
您只能在"调入iframe"页面中创建该功能,而不能在iframe托管页面内创建.

怎么做:

• 你可以将你包装iframe成一个div
• 点击"浏览"您iframe使用的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>

NOTA BENE:

• iframe元素不会记录任何点击,因此用例将是:如果通过单击iframe,您想要将其全屏放大....等等...
• 另外(亲切地建议@Christophe)IE8是盲目的pointer-events: