0

I have the following code with an invisible div that's over an iframe. I would like to get all the mouse events that are executed on the iframe (for now let's listen just to click). But if I set the pointer-events to none, the click listener is not called.

I tried to implement this as well, but without success: Add click event to iframe

My goal is to listen to any event that happens in the iframe and pop-up a message in the main window: "some event happend in the iframe". I don't care to know more info about the events in the iframe, just if they where triggered or not.

Note: The src of the iframe is a different domain as the window.

Any ideas if this is possible?

jQuery(function($) { // DOM ready

  $('#overlay').on('click', function(e) {
    alert('test');
  });

});
#frame {
  z-index: 1;
  width: 600px;
  height: 400px;
  position: absolute;
  pointer-events: all;
}

#overlay {
  width: 605px;
  height: 405px;
  opacity: 0;
  background: red;
  z-index: 9999;
  position: absolute;
  pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="frame" src="http://www.guguncube.com">
</iframe>
<div id="overlay">
</div>

here is http://jsfiddle.net/cxbmu/348/

Edwin
  • 2,146
  • 20
  • 26
  • pointer events none disables all mouse interactions so how do you expect it to click - from https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events: *The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.* – Pete Aug 03 '18 at 14:38
  • Also how are you going to know what in the iframe they click on to fire whatever event you are trying to fire (I'm guessing you want to bind some sort of click to the iframe if you're doing this). I think this is a security issue if the frame content does not belong to you, probably an [xy problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) rather than a click in an overlay issue – Pete Aug 03 '18 at 14:43
  • Why are you setting the pointer-events to none if you want them ? – Pogrindis Aug 03 '18 at 14:57
  • @Pete it doesn't interest me what is clicked in the iframe, just to know when something in the iframe is clicked/moved. So the `pointer-events:none` I found it in old SO posts and blogs (https://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/). If this doesn't work I'm interested in another solution to know when an event is called in the iframe that points to an other domain. – Edwin Aug 04 '18 at 10:22

2 Answers2

0

var frame = $('#frame').contents(); only possible if same domain or CORS

frame.find('body').click(function(event){
   console.log('yaay');
});

If this wasn't given many sites would be pretty vulnerable to XSS.

SirPilan
  • 4,649
  • 2
  • 13
  • 26
  • this is the solution for the same domain iframe, yes. But I am not interested in reading the content of the iframe, just if any of the events were triggered. So I need a solution for cross domain iframes. – Edwin Aug 04 '18 at 13:24
  • @Edwin this wont work for cross domain iframes - except you add a [Access-Control-Allow-Origin](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) header to the page in the iframe - for which youll need access to its srouces. - If you dont have access - you dont have access :) – SirPilan Aug 04 '18 at 18:51
-1

you must remove pointer-events: none from css:

<iframe id="frame" src="http://www.guguncube.com">
</iframe>
<div id="overlay">
</div>

#frame {
  z-index: 1;
  width: 600px;
  height: 400px;
  position: absolute;
  pointer-events: all;
}

#overlay {
  width: 605px;
  height: 405px;
  opacity: 0;
  background: red;
  z-index: 9999;
  position: absolute;
}

$(document).ready(function(){
  $('#overlay').on('click', function(e) {
    alert('test');
  });
})
Morteza Fathnia
  • 435
  • 3
  • 12
  • doing this will not let the mouse events (like clicks) on the iframe – Edwin Aug 04 '18 at 13:21
  • Do you want to click on overlay or iframe?what do you want? – Morteza Fathnia Aug 04 '18 at 14:23
  • I want to click/drag&drop/right-click the iframe content and to trigger a custom event on the main page. Keep in mind that I want to do that when the IFrame is pointing to another domain. – Edwin Aug 05 '18 at 08:45