javascript - 我网页中的 IFrame 触发模糊事件

Question

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

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

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

我提到了类似的主题 - $(window).blur event affecting Iframe和 How can I capture the blur and focus of the entire browser window?

还有其他想法吗？

更新- 我采用了另一种方法，让我又向前迈进了一步。下面的代码是新方法

$(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 的焦点和模糊事件不会绑定(bind)，并且 Iframe 单击时倒计时停止。

对此有什么想法吗？

Answer 1

我认为问题是，一旦内容加载到您的 iframe，它就会被您的浏览器与窗口隔离(出于安全考虑)。

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

看看Window postmessage