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)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.