How to detect click event in iframe using jquery
13,756
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>
Author by
Larry Lu
Updated on July 13, 2022Comments
-
Larry Lu almost 2 years
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.