Larry Lu Larry Lu - 6 months ago 116
Javascript Question

How to detect click event in iframe using jquery

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.

Answer

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>

Comments