Detect Click into Iframe

Ask the community
,
1

I see in the stackoverflow link below that there are many workarounds to achive this.

But I couldn’t run these solutions on wix velo. Can anyone please help me achive this?
Thank you.

const message = document.getElementById("message");

window.addEventListener("blur", () => {
  setTimeout(() => {
    if (document.activeElement.tagName === "IFRAME") {
      message.textContent = "clicked " + Date.now();
      console.log("clicked");
    }
  });
}, { once: true });

<div id="message">
</div><iframe src="//example.com"></iframe>

I would appreciate if someone fix this code so that it can work on velo.

2

  1. You added a ‘blur’ event and not a ‘click’ event.

  2. You can’t fetch the iframe itself using wix iframe as it’s sandboxed (unless you create an iframe using custom element).
    If you wish to detect any click inside an iframe, you can try something like:

<!DOCTYPE html>
<body>
  <!-- Put here the UI html elements -->
  <script>
    window.addEventListener('click', () => {
      console.log('CLICKED');
    })
    </script>
</body>
</html>
3

Thank you for your reply J.D., I copied the exact code that you give to an html widget but it didn’t worked unfortunately :/. It didn’t log anything to the console when clicked over on wix preview mode. Can you please check it again?

Waiting for your reply

4

@makislaskos28968 Try it on live site.

5

@J. D. When put an ad banner code to it doesn’t log anything to console when clicked on ad. I also tried it on live site. Is there any way to check that click? These iframes will be basicly ads. I want to count the total clicks and compare them with my adnetwork analytics.

Thank you for all your help again, waiting for your reply.

6

Maybe some code you added prevents the event from bubbling up. So when you click an inner (child) element the window click listener doesn’t trigger.
You should look at your code and see (because my code as is works well).