How to detect click event in iframe using jquery

Question

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.

Possible duplicate of How to add click event to a iframe with JQuery — Jaumzera
– Jaumzera, Commented May 24, 2016 at 3:22
Take a look at the answer stackoverflow.com/questions/2381336/… — Masum Billah
– Masum Billah, Commented May 24, 2016 at 3:25
So try this one: jsfiddle.net/4HQc4, from stackoverflow.com/questions/15080222/add-click-event-to-iframe — Jaumzera
– Jaumzera, Commented May 24, 2016 at 3:26
Possible duplicate of: stackoverflow.com/questions/6452502/… — Anialation
– Anialation, Commented May 24, 2016 at 3:30

Senjuti Mahapatra · Accepted Answer · 2016-05-24 03:30:03Z

6

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>

answered May 24, 2016 at 3:30

Senjuti Mahapatra

2,6004 gold badges29 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paulin Trognon Over a year ago

But then the click doesn't propagate to the iframe, does it?

Robert Moore Over a year ago

No, I'm pretty sure it can't.

Larry Lu · Accepted Answer · 2016-05-24 03:43:25Z

0

Your current code is working fine, try to click it to the border of the iframe and the alert will show. I tried to create a solution for you by adding an overlay to the iframe

You can see the DEMO

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

edited May 24, 2016 at 3:43

Larry Lu

1,6913 gold badges21 silver badges29 bronze badges

answered May 24, 2016 at 3:28

winresh24

6791 gold badge6 silver badges27 bronze badges

Comments

Luca C. · Accepted Answer · 2016-11-01 17:48:59Z

0

I did this:

<div style="position:relative;">
    <iframe src="..."></iframe>
    <div style="position:absolute;top:0;left:0;right:0;bottom:0;eventual mouse cursor style" onclick="eventual alternative action"></div>
</div>

answered Nov 1, 2016 at 17:48

Luca C.

12.7k2 gold badges89 silver badges83 bronze badges

Collectives™ on Stack Overflow

How to detect click event in iframe using jquery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related