How to trigger a function on parent div when iframe content is clicked?

Question

I'm trying to create a reusable function that works by hiding a specific div (outside the iframe) whenever a click is made anywhere inside an iframe.

To be more specific, this div I want to hide is a search menu that can be opened on top (z-index) of an iframe. I'd like to close this menu whenever I click outside it, which happens to be inside the full screen iframe.

I couldn't make it work using the solutions from this and other similar pages (Whenever I change the URL, it doesn't work anymore): Detect click event inside iframe

I managed to do something like this that works but the code is repetitive. I'd like a more general function that works whenever I click inside any iframe.

const iframeListener1 = addEventListener('blur', function() {
  if (document.activeElement === document.getElementById('chrono-loader')) {
    $('#outer-layer-card').stop().fadeOut('fast');
  }
  removeEventListener('blur', iframeListener);
});

const iframeListener2 = addEventListener('blur', function() {
  if (document.activeElement === document.getElementById('plus-loader')) {
    $('#outer-layer-card').stop().fadeOut('fast');
  }
  removeEventListener('blur', iframeListener);
});

const iframeListener3 = addEventListener('blur', function() {
  if (document.activeElement === document.getElementById('google-docs-1-loader')) {
    $('#outer-layer-card').stop().fadeOut('fast');
  }
  removeEventListener('blur', iframeListener);
});

const iframeListener4 = addEventListener('blur', function() {
  if (document.activeElement === document.getElementById('google-sheets-2-loader')) {
    $('#outer-layer-card').stop().fadeOut('fast');
  }
  removeEventListener('blur', iframeListener);
});

const iframeListener5 = addEventListener('blur', function() {
  if (document.activeElement === document.getElementById('google-docs-3-loader')) {
    $('#outer-layer-card').stop().fadeOut('fast');
  }
  removeEventListener('blur', iframeListener);
});

const iframeListener6 = addEventListener('blur', function() {
  if (document.activeElement === document.getElementById('google-docs-4-loader')) {
    $('#outer-layer-card').stop().fadeOut('fast');
  }
  removeEventListener('blur', iframeListener);
});

How can I trigger a function (to hide one specific div) whenever I click on any iframe?

Thanks in advance for any suggestions or help

U have a solution here: https://stackoverflow.com/questions/16792953/onclick-function-doesnt-fire-on-iframe — D A, Nov 10 '22 at 12:47

Flewz · Accepted Answer · 2022-11-10T13:54:21.827

Can save event listeners into a object and have a function to add them dynamically. That would mean to have some sort of html element which would have data-target attribute or similar. Additionaly can move the id_target to function parameter.

var iframe_listeners = [];

function add_iframe_event(){
  const id_target = $('data-target element').data('target');

  iframe_listeners[id_target] = addEventListener('blur', function() {
    if (document.activeElement === document.getElementById(id_target)) {
      $('#outer-layer-card').stop().fadeOut('fast');
    }
    removeEventListener('blur', iframe_listeners[id_target]);
  });
}

Edit:
loop method

var iframe_listeners = [];
const ids = [ '1', '2' ];

for(const id of ids){
  // skip if element doesnt exist
  if($(`#${id}`).length == 0) continue;

  add_iframe_event(id);
}

function add_iframe_event(id_target){
  iframe_listeners[id_target] = addEventListener('blur', function() {
    if (document.activeElement === document.getElementById(id_target)) {
      $('#outer-layer-card').stop().fadeOut('fast');
    }
    removeEventListener('blur', iframe_listeners[id_target]);
  });
}

Hi thank you for taking the time to post an answer. Can you please tell me more how I can use this? Should I just add the `ids` inside the bracket `iframe_listeners`? Sorry I'm still trying to learn JS. — ixcode, Nov 10 '22 at 13:09
@ixcode `iframe_listeners` will be used by the function. The `$('data-target element')` selector will have that information. for example a div element `
` can be used to add a listener `$('div[data-target="google-sheets-*"]')`. Or you can feed all different ids into an array and iterate over with for loop and call `add_iframe_event()` with id as parameter. — Flewz, Nov 10 '22 at 13:49

How to trigger a function on parent div when iframe content is clicked?

1 Answers1