Capturing mousedown event on div with iframe child

Question

I'm trying to capture the mouse down event for the div containing the iframe. Is there any way to do it? It seems that the iframe is capturing the event and the mousedown event is not triggered for the div.

jQuery(".test").on("mousedown", ()=> console.log("Test"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<a href="/" >Test</a>
</div>

<div class="test">
<iframe src="https://www.google.com/" ></iframe>
</div>

On which `test` class you have to perform mouse down event because you have two test class in your code — Faheem azaz Bhanej, Jun 24 '22 at 11:39
@FaeemazazBhanej the used syntax automatically binds the click handler to _all_ elements with that class currently existing in the document. — CBroe, Jun 24 '22 at 11:41
What do you actually want to _achieve_ here? If you don't need to be able to interact with the iframe content, then you could simply put `pointer-events: none` on the iframe element ... — CBroe, Jun 24 '22 at 11:43
I'm doing some automation tasks, on the site there is a "Trust Pilot" link, embedded on an iframe, as I'm not able to get the event from the tag inside the iframe, it would also work if I'm able to get it from the div where is embedded as it has the same size as the iframe. Also, it would be not possible to modify the content of the page. — Daniel Pérez Rodríguez, Jun 24 '22 at 11:49

score 0 · Answer 1 · answered Jun 24 '22 at 11:46

0

As far as i know, the only way you will be able to interact with iframe-content via javascript (and css aswell) is, if the scope of the domain is the same. Example-Demo

Any Cross-Domain interaction nowadays requires a CORS-configuration to allow for interaction between the different domains.

For that reason i would argue, that what you are trying to achieve is not really possible anymore (except if you are in control of both domains).

answered Jun 24 '22 at 11:46

Christoph Kern

419
2
7

I'm not trying to interact with the iframe, I'm trying to interact with the parent div. But is seems that the iframe is capturing the event. – Daniel Pérez Rodríguez Jun 24 '22 at 11:50
When the iframe content loads, everything within the iframe-container is not considered to be "your" website anymore. Therefore any javascript-interaction is not allowed, since that woud be an unauthenticated cross-domain-request. – Christoph Kern Jun 24 '22 at 11:59
1

Have a look at this [question](https://stackoverflow.com/questions/1609741/how-to-add-click-event-to-a-iframe-with-jquery) As mentioned in the comments of the top answer, your only way might be to use some sort of "hack" when you leave the realms of your own domain. Like putting and absolute positioned element above the iframe – Lapskaus Jun 24 '22 at 12:20

score 0 · Answer 2 · answered Jun 24 '22 at 12:33

I managed to find a solution, not the best but it works for me

jQuery(window).on('blur', function() {
  if (document.activeElement === document.querySelector('iframe')) {
    console.log('clicked on iframe')
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test">
  <iframe id="testiframe" src="https://www.google.com/" ></iframe>
</div>

score -3 · Answer 3 · answered Jun 24 '22 at 11:39

-3

Since you are using jQuery, you can use the contents() method, so:

jQuery(".test").contents().on("mousedown", ()=> console.log("Test"))

However, it can be a bit sketchy to intercept a click to someone else's page!! What are you doing with the click?

answered Jun 24 '22 at 11:39

Blunt Jackson

616
4
17

_"you can use the contents() method"_ - not if the iframe content is from a different origin, as is the case in the given example. – CBroe Jun 24 '22 at 11:41
Oh, right. So then the op can't. Because it's too sketchy! – Blunt Jackson Jun 24 '22 at 11:42

Capturing mousedown event on div with iframe child

3 Answers3