我的网页内的IFrame触发模糊事件

Question

我的网页上有倒计时和IFrame。 倒计时将停在$(window).blur并从$(window).focus 。 当我点击IFrame时，它会触发模糊事件并停止倒计时。 我通过以下代码行解决了这个问题。

 $(window).blur(function () {
  if (document.activeElement.nodeName == "IFRAME") {
    //Continue timer
    else {
        //Stop timer
    }
 });

但是，当我在点击IFrame内部后立即点击窗口外时，Blur事件不会被触发。 由于模糊事件不会在模糊事件后触发，除非触发焦点事件。

我引用了类似的主题 - 影响Iframe的$（window）.blur事件以及如何捕获整个浏览器窗口的模糊和焦点？

还有其他想法吗？

更新 - 我做了另一种方法，让我领先一步。 以下代码是新方法

$(window).on('focus', function () {
                            //Coundown runs
                    }).on('blur', function () {
                            //Coundown stops
                    });;

 $(document).ready(function () {
                var iframe = document.getElementById("iframeID");
                            $(iframe.contentWindow).on('focus', function (){
                                    //Coundown runs
                            }).on('blur', function () {
                                    //Coundown stops
                            });
                    });

此代码将使iframe焦点上的倒计时运行并停止iframe模糊。

但是 ，我在这种方法中面临的问题是，当“scr”未在Iframe中加载时，倒计时工作正常。 如果在iframe中加载“scr”，则iframe的焦点和模糊事件未获得绑定，并且在iframe点击时停止倒计时。

有什么想法吗？

Answer 1

我认为问题是，只要内容被加载到您的iframe，它就会被您的浏览器与窗口隔离（由于安全性方面的考虑）。

您可以使用Window.postMessage()在主窗口和iframe之间传递事件。

看一下Window postmessage