$ (window) .blur event affecting iframe

Question

I want to determine when the user leaves my page (for example, open a new tab), so I can stop the countdown. I did this using:

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

But I have an Iframe inside my page, and the countdown also stops when the user clicks on it, but I do not want the specified event to be executed when someone clicks on the iframe.

Any idea?

Update, am I trying a little more based on this Click-event answer on an iframe? :

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

Update: Tim B solution worked:

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

Now I need to remove focus from the Iframe every time a blur event is triggered, otherwise the countdown will not stop if the user changes the tab after focusing the Iframe. I tried using this condition:

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

But that did not work. Any ideas?

Answer 1

One solution would be to check if the iframe has focus and then does not stop the timer. eg.

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

Now this will work, however, if your iframe has focus, when the user changes the tab, the countdown will not stop. Therefore, in this situation, you will need to think of an elegant solution to move the focus from the previous iframe. For example, if the user clicks inside the iframe, immanently moves the focus back to the parent window.

Edit - Updated answer to include additional iframe features

Ok, so I played with that. Now I don’t know what content you have in your iframe, but you can add some code to it that basically sends focus back to the object in the parent window when clicked. eg.

In iFrame

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

On the home page

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

This will allow you to click on the iframe, set focus to the main page, and then stop the countdown.

Answer 2

Due to the isolation of the iframe, clicking inside it is considered a blur for the parent. If the contents of an iframe can be entered using ajax, this would be a better option.

Answer 3

I have the same problem. in my case, I do not have access to the iframe page and its loading in the CMS, and I cannot change all the iframes. my timer is using setInterval () and inside the interval I check 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(); } }