$ (window) .blur событие, влияющее на Iframe

Question

Я хочу обнаружить, когда пользователь покидает мою страницу (например, открывайте новую вкладку), поэтому я могу остановить обратный отсчет. Я сделал это с помощью:

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

Но у меня есть Iframe в моей странице, и отсчет времени также останавливается, когда пользователь нажимает на нее, но я не хочу выше событие, чтобы выполнить, когда кто-то нажимает на Iframe.

Любая идея?

Update, я пытаюсь немного больше, на основе этого ответа Click-event on iframe?:

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

Update: решение 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(); 
} 

Но это не сработало. Есть идеи?

Answer 1

Одним из решений было бы проверить, имеет ли iframe фокус, а затем не останавливает таймер. например

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

Теперь это будет работать, однако, если ваш IFrame имеет фокус при закладке пользователь изменяет, обратный отсчет не остановится. Поэтому в этой ситуации вам нужно будет подумать о элегантном решении для перемещения фокуса от прежнего iframe. Например, если пользователь нажимает внутри iframe, имманентно перемещает фокус обратно в родительское окно.

Edit - Обновлен ответ включать дополнительные функциональные возможности IFrame

Ok, так что я играл примерно с этим. Теперь я не знаю, какой контент у вас есть в вашем 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, установите фокус обратно на главную страницу, а затем остановить отсчет.

Answer 2

Из-за изоляции iframe щелчок внутри него считается размытием для родителя. Если содержимое iframe может быть введено с помощью ajax, это будет лучшим вариантом.