Legg til klikkhendelse til iframe- Slik oppdager du en klikkhendelse på en iframe på tvers av domener- javascript

const state = {};  
  
(function(setup) {  
    if(typeof window.addEventListener !== 'undefined') {  
        window.addEventListener('load', setup, false);  
    } else if(typeof document.addEventListener !== 'undefined') {  
        document.addEventListener('load', setup, false);  
    } else if(typeof window.attachEvent !== 'undefined') {  
        window.attachEvent('onload', setup);  
    } else {  
        if(typeof window.onload === 'function') {  
            const oldonload = onload;  
            window.onload = function() {  
                oldonload();  
                setup();  
            };  
        } else {  
            window.onload = setup;  
        }  
    }  
})(function() {  
    state.isOverIFrame = false;  
    state.firstBlur = false;  
    state.hasFocusAcquired = false;  
  
    findIFramesAndBindListeners();  
  
    document.body.addEventListener('click', onClick);  
  
    if(typeof window.attachEvent !== 'undefined') {  
        top.attachEvent('onblur', function() {  
            state.firstBlur = true;  
            state.hasFocusAcquired = false;  
            onIFrameClick()  
        });  
        top.attachEvent('onfocus', function() {  
            state.hasFocusAcquired = true;  
            console.log('attachEvent.focus');  
        });  
    } else if(typeof window.addEventListener !== 'undefined') {  
        top.addEventListener('blur', function() {  
            state.firstBlur = true;  
            state.hasFocusAcquired = false;  
            onIFrameClick();  
        }, false);  
        top.addEventListener('focus', function() {  
            state.hasFocusAcquired = true;  
            console.log('addEventListener.focus');  
        });  
    }  
  
    setInterval(findIFramesAndBindListeners, 500);  
});  
  
function isFF() {  
    return navigator.userAgent.search(/firefox/i) !== -1;  
}  
  
function isActiveElementChanged() {  
    const prevActiveTag = document.activeElement.tagName.toUpperCase();  
    document.activeElement.blur();  
    const currActiveTag = document.activeElement.tagName.toUpperCase();  
    return !prevActiveTag.includes('BODY') && currActiveTag.includes('BODY');  
}  
  
function onMouseOut() {  
    if(!state.firstBlur && isFF() && isActiveElementChanged()) {  
        console.log('firefox first click');  
        onClick();  
    } else {  
        document.activeElement.blur();  
        top.focus();  
    }  
    state.isOverIFrame = false;  
    console.log(`onMouseOut`);  
}  
  
function onMouseOver() {  
    state.isOverIFrame = true;  
    console.log(`onMouseOver`);  
}  
  
function onIFrameClick() {  
    console.log(`onIFrameClick`);  
    if(state.isOverIFrame) {  
        onClick();  
    }  
}  
  
function onClick() {  
    alert(`onClick`);  
}  
  
function findIFramesAndBindListeners() {  
    return Array.from(document.getElementsByTagName('iframe'))  
        .forEach(function(element) {  
            element.onmouseover = onMouseOver;  
            element.onmouseout = onMouseOut;  
        });  
}