$(window).blur event affecting Iframe

Question

I want to detect when the user leaves my page( e.g open a new tab) so I can stop a countdown. I did it 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 don't want the above event to execute when someone clicks on the Iframe.

Any idea?

Update, I'm trying a bit more, based on this answer Click-event on 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 have to remove focus from the Iframe every time the blur event is called, otherwise the countdown will not stop if the user changes tab after focusing the Iframe. I tried like this using the above condition:

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

But it did not work. Any idea?

I solved a problem very similar to yours See my answer at http://stackoverflow.com/questions/9880193/how-can-i-capture-the-blur-and-focus-of-the-entire-browser-window/17603566#17603566 — Tony Lâmpada, Jul 11 '13 at 21:13

Tim B James · Accepted Answer · 2013-04-16T15:00:48.630

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

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

Now this would work, however if your iframe has the focus when the user changes tab, the countdown would not stop. So in this situation you would need to think of an elegant solution to move focus away from the iframe prior. For instance, if a user clicks within the iframe, immanently move focus back to the parent window.

Edit - Updated answer to include extra iframe functionality

Ok so I have been playing about with this. Now I don't know what content you have within your iframe, but you can add some code to this which basically sends the focus back to an object within the parent window when clicked on. e.g.

In your iFrame

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

In your main 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 back to the main page, and then stop the countdown.

It worked. Thank you! Now I'm trying to remove focus from the iframe. I updated my question if you want to check it out, because it's not working. I really appreciate your help, thanks. — Jirico, Apr 16 '13 at 14:17
Thanks for the help again. But the script inside iFrame is not working, is it ok to put a script tag inside iFrame like that? — Jirico, Apr 16 '13 at 17:54
I edited your answer to your first one since it works in a nice and simple way and I was not able to reproduce your second one :) — Jirico, Apr 18 '13 at 18:28

score 1 · Answer 2 · answered Apr 16 '13 at 13:10

1

Because of the isolation of the iframe, clicking inside it counts as a blur for the parent. If the content of the iframe could be brought in with ajax, that would be a better option.

answered Apr 16 '13 at 13:10

Mooseman

18,763
14
70
93

That would be complicated since the user can navigate inside iframe. Can't I remove the blur event if the user clicks in the Iframe? I updated my question, please give it a look. – Jirico Apr 16 '13 at 13:14
See http://stackoverflow.com/questions/2381336/detect-click-into-iframe-using-javascript – Mooseman Apr 16 '13 at 13:18

score 0 · Answer 3 · answered Apr 20 '19 at 09:55

I have the same problem. in my case, I haven't access to iframe page and its load by CMS and I can't change all of the iframes. my timer counting with setInterval() and inside the interval, I check the 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();     
  }
  
}

score 0 · Answer 4 · edited Jul 12 '23 at 13:18

0

If you don't need to interact with the iframe you can now prevent it from getting focus with CSS.

iframe {
  pointer-events: none;
}

edited Jul 12 '23 at 13:18

Tyler2P

2,324
26
22
31

answered Jul 11 '23 at 02:08

RStanfod

1

$(window).blur event affecting Iframe

4 Answers4

Linked