$(window).blur 事件影响 Iframe答案

【问题标题】：$(window).blur event affecting Iframe$(window).blur 事件影响 Iframe
【发布时间】：2013-04-08 21:28:50
【问题描述】：

我想检测用户何时离开我的页面（例如打开一个新标签），以便我可以停止倒计时。我是这样做的：

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

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

有什么想法吗？

更新，我正在尝试更多，基于这个答案Click-event on iframe?：

iframeDoc = $('iframe').contents().get(0);
$(iframeDoc).click(function(){
   //maybe remove blur event?
});

更新： 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 中有什么？
外部网站 dom.
我解决了一个与您的问题非常相似的问题，请参阅stackoverflow.com/questions/9880193/…我的答案

标签： javascript jquery dom iframe

【解决方案1】：

一种解决方案是检查 iframe 是否具有焦点，然后不停止计时器。例如

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

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

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

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

在您的 iFrame 中

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

在您的主页中

<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>

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

【讨论】：

成功了。谢谢！现在我正在尝试从 iframe 中移除焦点。如果您想查看它，我更新了我的问题，因为它不起作用。非常感谢您的帮助，谢谢。
再次感谢您的帮助。但是iFrame里面的脚本不行，这样在iFrame里面放一个script标签可以吗？
我编辑了你对你的第一个答案的回答，因为它的工作方式很好而且简单，我无法重现你的第二个 :)

【解决方案2】：

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

【讨论】：

这会很复杂，因为用户可以在 iframe 中导航。如果用户在 iframe 中单击，我不能删除模糊事件吗？我更新了我的问题，请看一下。
见stackoverflow.com/questions/2381336/…

【解决方案3】：

我也有同样的问题。就我而言，我无法访问 iframe 页面及其由 CMS 加载的内容，也无法更改所有 iframe。我的计时器使用 setInterval() 计数，在间隔内，我检查 Iframe。

const focus = function() {
	// timer start
	isBlured = 0;
};

const blur = function() {
  // timer stop
  isBlured = 1;
}

window.addEventListener('focus', focus);
window.addEventListener('blur', blur);

function intervalFunction() {
 
  var activeELM = document.activeElement.tagName;

  if (isBlured == 0 || activeELM == "IFRAME"){
      // dont stop countdown
    	var stopIframe = $('iframe').blur();     
  }
  
}

【讨论】：