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

Issue

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

Solution

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]);
  });
}

Answered By - Flewz

Answer Checked By - Robin (PHPFixing Admin)