iframe માં ક્લિક ઇવેન્ટ ઉમેરો - ક્રોસ ડોમેન iframe પર ક્લિક ઇવેન્ટ કેવી રીતે શોધી શકાય છે - 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;
        });
}
Demo
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>How to detect a click event on a cross domain iframe</h1>
    <iframe id="video_play1" src="https://open.spotify.com/embed/track/16HPj2zrjdSXCH5SGf0NY0?si=2584d6594f65412a"></iframe></iframe>

    <script>
        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;
                });
        }
    </script>
</body>
</html>