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模糊处停止。

但是，我在这种方法中遇到的问题是倒计时工作正常＆＃34; scr＆＃34;未在iframe中加载。如果＆＃34; scr＆＃34;加载到iframe然后焦点和模糊事件为Iframe没有得到绑定和倒计时停止在Iframe点击。

对此有什么想法吗？

Answer 1

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

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

查看Window postmessage

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

1 个答案: