Javascript – Remove focus from Iframe on page load

iframejavascriptjquery

I have an Iframe embedded like this:

<iframe id="foo" src="http://www.something.com" style="width: 90%; height: 300px"></iframe>

Each time the page loads focus gets lost from the top of the page and switches to this Iframe that is in the footer.I was wondering how can i remove the focus from this and make the page load "normally"?

Thanks!

Update: Yes, iframe is being loaded from another source (not the same domain)

Best Solution

if assumed the iframe is not served from the same domain.. you can place any other focusable dom element after the iframe in the footer with autofocus set as true. And if that does not work please try the following in the parent main window:

$(window).on('load', function() {
    setTimeout(function(){$("body").focus()}, 100);
};

OR going by vanilla JS

window.onload = function() {
    document.getElementById("some-focusable-element-from-parent-window").focus();
};