CODEWITHSUNDEEP
javascripthtmliframe
jaysonp
jaysonp

Reputation: 291

Prevent an iframe from stealing focus

I have a website that embeds an iframe. When I was testing the iframe, I used google.com and noticed the search input field took focus. Clearly, I won't be using google.com for production but would like to prevent the iframe from stealing focus.

Is there a way to prevent an iframe from stealing focus?

Upvotes: 23

Views: 19649

Answers (6)

Tim Nieradzik
Tim Nieradzik

Reputation: 309

You could poll the document's active element. If it happens to be an <iframe>, you can call the blur() function to restore the previously focused element:

setInterval(_ => {
    if (document.activeElement.tagName == "IFRAME") {
        document.activeElement.blur();
    }
}, 500);

Upvotes: 3

Cymro
Cymro

Reputation: 1274

I found a solution here:

Disable Body/Content Scrolling With jQuery - disableScroll

Disabling scrolling stopped the iframe from stealing the focus.

I used this in my jquery script:

if( $('iframe').length != 0 ) $(window).disablescroll();

window.addEventListener('touchstart', function onFirstTouch() 
{
window.removeEventListener('touchstart', onFirstTouch, false);
AllowScrolling()
}, false);

$(window).on("scroll",function(){ $(window).off("scroll"); AllowScrolling() });

setTimeout(AllowScrolling,5000); //Fallback
function AllowScrolling(){$(window).disablescroll('undo')}

So if a user touches the screen or clicks the scroll bar, scrolling is permitted. Seemed to work ok for me.

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105903

You may wait for the onload event on iframe to set focus() back to body, but if you come from a link reaching a specific anchor/id of the page, it might not a good idea.

A possibility more alike a CSS trick is to set iframe in fixed position untill it is loaded, then back to static (or the original position or your style sheet).

simple test to perform if that suits your needs :

iframe {position:fixed}

along with 

  window.onload = function() {
  for (let iframe of document.querySelectorAll("iframe")) {
    iframe.style.position = "static";
  }
};

here is a codepen for test : https://codepen.io/gc-nomade/pen/gOpXwzY (comment below here if the link or iframe is broken)

Upvotes: 1

Robert S
Robert S

Reputation: 496

Use a setTimeout function to refocus on an element of your choice, e.g. window.onload = function(){ setTimeout( function() { element.focus() }, 500 ) };

Upvotes: 0

Lobster Fighter
Lobster Fighter

Reputation: 758

If you have access to server side scripting you can use it to download a live copy of the page you want to embed, search it and remove any focus stealing code, then display that modified page in your iframe. Or if you find there is no focus stealing code, you can just link your iframe to the remote page as usual.

Another option might be to initially hide the iframe with CSS style="display:none" and allow the user to unhide it with javascript Object.style.display="inline"

Upvotes: 7

Wladimir Palant
Wladimir Palant

Reputation: 57651

Not really. You can put the focus back on your window if the focus moves away (WARNING: I don't recommend using that code):

<body onblur="window.focus();">

This has some not so nice side-effects like not being able to focus the location bar in Firefox or getting into endless loops if the frame also tries to fight for the focus. So if you want to do this (that's a big "if", I don't recommend it) you should at least limit it to the page loading phase and allow the focus to be changed after that.

Upvotes: -1

Related Questions