Javascript $（窗口）。影响Iframe的模糊事件

我想检测用户何时离开我的页面（例如打开一个新选项卡），以便停止倒计时。我用了：

$(window).blur(function() {
 //stop countdown
});

但是我的页面中有一个Iframe，当用户单击它时，倒计时也会停止，但是我不希望在有人单击Iframe时执行上述事件

有什么想法吗

更新，我正在尝试更多，基于这个答案：

更新： Tim B解决方案有效：

$(window).blur(function () {
// check focus
if ($('iframe').is(':focus')) {
    // dont stop countdown
}
else {
    // stop countdown
}                
});

现在，每次调用模糊事件时，我都必须从Iframe中移除焦点，否则，如果用户在聚焦Iframe后更改选项卡，倒计时将不会停止。我使用上述条件进行了如下尝试：

if ($('iframe').is(':focus')) {
    // dont stop countdown
    $("iframe").blur()
    $(window).focus();
}

---

但它没有起作用。有什么想法吗

由于iframe的隔离，在其内部单击会对父对象造成模糊。如果iframe的内容可以通过ajax引入，那将是一个更好的选择。

一个解决方案是检查iframe是否具有焦点，然后不停止计时器。e、 g

$(window).blur(function () {
    // check focus
    if ($('iframe').is(':focus')) {
        // dont stop countdown
    }
    else {
        // stop countdown
    }                
});

现在，这将起作用，但是如果用户更改选项卡时iframe具有焦点，倒计时将不会停止。因此，在这种情况下，您需要考虑一个优雅的解决方案，将焦点从iframe转移到iframe。例如，如果用户在iframe中单击，则会将焦点内在地移回父窗口

编辑-更新答案以包括额外的iframe功能

好吧，我一直在玩这个。现在我不知道您的iframe中有什么内容，但是您可以添加一些代码，当单击时，这些代码基本上会将焦点发送回父窗口中的对象。e、 g

在你的iFrame里

<script>
    $(function () {
        $(document).click(function () {
            // call parent function to set focus
            parent.setFocus();
        });
    });
</script>

$（函数（）{
$（文档）。单击（函数（）{
//调用父函数来设置焦点
setFocus（）；
});
});

在你的主页上

<script>

    function setFocus() {
        // focus on an element on your page.
        $('an-element-on-your-page').focus();
    }

    $(function () {

        $(window).focus(function (e) {
            // bind the blur event
            setBindingEvent();
        });

        var setBindingEvent = function () {
            // unbind
            $(window).unbind('blur');
            $(window).blur(function () {
                // check focus
                if ($('iframe').is(':focus')) {
                    // unbind the blur event
                    $(window).unbind('blur');
                }  
                else {
                    // stop countdown
                }                
            });
        };

        setBindingEvent();

    });
</script>

函数setFocus（）{
//关注页面上的某个元素。
$（'an-element-on-your-page'）.focus（）；
}
$（函数（）{
$（窗口）。焦点（函数（e）{
//绑定模糊事件
setBindingEvent（）；
});
var setBindingEvent=函数（）{
//解开
$（窗口）。解除绑定（'blur'）；
$（窗口）.blur（函数（）{
//检查焦点
if（$（'iframe'）。是（':focus'））{
//解除模糊事件的绑定
$（窗口）。解除绑定（'blur'）；
}  
否则{
//停止倒计时
}                
});
};
setBindingEvent（）；
});

---

这将允许您单击iframe，将焦点设置回主页面，然后停止倒计时。

我也有同样的问题。在我的情况下，我无法通过CMS访问iframe页面及其加载，也无法更改所有iframe。 我的计时器使用setInterval（）计数，在间隔内，我检查Iframe

const focus=function（）{
//定时器启动
isblued=0；
};
常数模糊=函数（）{
//计时器停止
isblued=1；
}
window.addEventListener（'focus'，focus）；
window.addEventListener（'blur'，blur）；
函数间隔函数（）{
var activeELM=document.activeElement.tagName；
if（isBlured==0 | | activeELM==“IFRAME”）{
//不要停止倒计时
var stopIframe=$（'iframe'）.blur（）；
}
}

这将很复杂，因为用户可以在iframe中导航。如果用户单击Iframe，我不能删除模糊事件吗？我更新了我的问题，请看一下。看看它是否有效。非常感谢。现在我试图从iframe中移除焦点。我更新了我的问题，如果你想检查它，因为它不工作。我真的很感谢你的帮助，谢谢。再次感谢你的帮助。但是iFrame内的脚本不起作用，可以在iFrame内像那样放置一个脚本标记吗？我编辑了你的第一个答案，因为它以一种非常简单的方式工作，我无法复制你的第二个：）你的iFrame内有什么？外部网站dom。我解决了一个与你的问题非常类似的问题。请参阅我的答案

<script>

    function setFocus() {
        // focus on an element on your page.
        $('an-element-on-your-page').focus();
    }

    $(function () {

        $(window).focus(function (e) {
            // bind the blur event
            setBindingEvent();
        });

        var setBindingEvent = function () {
            // unbind
            $(window).unbind('blur');
            $(window).blur(function () {
                // check focus
                if ($('iframe').is(':focus')) {
                    // unbind the blur event
                    $(window).unbind('blur');
                }  
                else {
                    // stop countdown
                }                
            });
        };

        setBindingEvent();

    });
</script>