jQuery .blur not working in Firefox

Question

I'm trying to hide my website when it loses focus. The problem is that it loses focus when I click inside an iframe on the site. To prevent this I have the following code, and it works perfectly in Chrome and even Edge. Why is this not working in Firefox?

jQuery(window).focus(function() {
    jQuery("body").show();
}).blur(function() {
    if(document.activeElement != (document.getElementsByTagName("iframe")[0] || document.getElementsByTagName("embed")[0])) {
        jQuery("body").hide();
    }
});

jQuery(document).ready doesn't solve my problem

Instead of activeElement you can try to use .target – Troyer Nov 24 '16 at 16:12 — Troyer, Nov 24 '16 at 16:12

score 1 · Answer 1 · answered Nov 24 '16 at 16:16

1

Firefox is having some troubles with activeElement, try this code below:

jQuery(window).focus(function(e) {
    jQuery("body").show();
}).blur(function(e) {
    if(e.target != (document.getElementsByTagName("iframe")[0] || document.getElementsByTagName("embed")[0])) {
        jQuery("body").hide();
    }
});

Hope it works now. :)

answered Nov 24 '16 at 16:16

Troyer

6,765
3
34
62

Thanks for the answer, but sadly it's not working yet. I put a console.log into the blur function to see what e.target returns, and it looks like e.target gets the 'iframe' parameter after the blur action ended. So when I click into the iframe it logs 'body', I click back and out again and it logs 'iframe'. – renataedit Nov 25 '16 at 12:31

jQuery .blur not working in Firefox

1 Answers1