如何检测使用jQuery的iframe中的点击事件 [英] How to detect click event in iframe using jquery

问题描述

这是我的iframe：

  #htmlDiv {
 position：absolute; 
 top：0px; 
 left：300px; 
 height：650px; 
 width：1130px; 
} 
 
 #htmlFrame {
 position：absolute; 
 top：0px; 
 left：0px; 
 margin：10px 10px 10px 10px; 
 padding：0px 0px 0px 0px; 
 height：630px; 
 width：1110px; 
} 
 
< div id =htmlDiv> 
< iframe id =htmlFrame>< / iframe> 
< / div> 
 $ b $（'＃htmlFrame'）。click（function（）{
 alert（'clicked'）; 
}）; 
  

但是当我点击iframe内时，它不显示clicked。

如何检测iframe内部的点击

解决方案

您无法检测到 iframe中。可以做的是，你可以在 iframe 之上放置重叠图层，并捕获重叠的点击事件DIV。请参阅下面的代码片段：

$（＃overlap）。警报（ 点击）; $（ ＃重叠）的CSS（ Z-指数， - 1）;}）; $（ ＃htmlFrame）上（ 鼠标离开，函数（）{$（ #overlap）。css（z-index，1）;}）;

  #htmlDiv {position：absolute; top：0px; left：300px;高度：65px; width：113px;}＃htmlFrame {position：absolute; top：0px; left：0px; margin：10px 10px 10px 10px; padding：0px 0px 0px 0px;身高：63px; width：110px;}＃overlap {position：absolute;背景色：trasparent; top：0px; left：0px; margin：10px 10px 10px 10px; padding：0px 0px 0px 0px; width：110px; height：63px;}  

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>< / script>< div id =htmlDiv> < iframe id =htmlFrame>< / iframe> < div id =overlap>< / div>< / div>

This is my iframe:

#htmlDiv {
    position: absolute;
    top: 0px;
    left: 300px;
    height: 650px;
    width: 1130px;
}

#htmlFrame {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 10px 10px 10px 10px;
    padding: 0px 0px 0px 0px;
    height: 630px;
    width: 1110px;
}

<div id="htmlDiv">
    <iframe id="htmlFrame"></iframe>
</div>

$('#htmlFrame').click(function(){
    alert('clicked');
});

But when I click inside the iframe, it doesn't show "clicked".
How do I detect click inside iframe.

解决方案

You cannot detect a click event on an iframe. What can be done is you can place a overlapping layer on top of your iframe and capture the click event of the overlapping div. See below snippet:

$("#overlap").on("click",function(){
		alert("click");
		$("#overlap").css("z-index",-1);

});
$("#htmlFrame").on("mouseleave",function(){
		$("#overlap").css("z-index",1);
});

#htmlDiv {
    position: absolute;
    top: 0px;
    left: 300px;
    height: 65px;
    width: 113px;
}

#htmlFrame {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 10px 10px 10px 10px;
    padding: 0px 0px 0px 0px;
    height: 63px;
    width: 110px;
}

#overlap{
  position: absolute;
  background-color:trasparent;
  top: 0px;
  left: 0px;
  margin: 10px 10px 10px 10px;
  padding: 0px 0px 0px 0px;
  width: 110px;
  height:63px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="htmlDiv">
    <iframe id="htmlFrame"></iframe>
  <div id="overlap">
</div>
</div>

这篇关于如何检测使用jQuery的iframe中的点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！