Remove focus from Iframe on page load

Question

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)

Answer 1

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();
};

Answer 2

Well there is too much things we can do, for example on window load we scroll to the top with scrollTop function, ...etc But with such methods, where we take off the focus and move back to the top when the window is completely loaded, it will come with a glitch and no well effect. After a while of thinking, and experiences, i come with that:

We remove the iframe with display:none, when the dom is ready. Next when the window is completely loaded, we bring it back. To do that efficienly, we write a style class like that:

    .display_none{
         display:none;
     }

and we will add this class to our iframe, when the document is ready, and remove this class when the window is fully loaded. There is the code :

$(document).ready(function(){
    $("#myFrame").addClass("display_none");
    $(window).load(function(){
        $("#myFrame").removeClass("display_none");
    });
});

Now there is a situation where this will not work! if the iframe is created and added with another script, then the dom may be loaded but not the iframe element itself (because the script may not have create it yet)! And that was the case in my case .

SOLUTION: put the iframe in a container, let say a div container, and apply the method above to this container. All should work nickel! On dom load the div is hidden, next when the window is fully loaded, it restore it back! and you get your iframe, which will be loaded and get displayed. No glitch, and efficient.

Answer 3

We can use sandbox attribute to block automatically triggered features (such as automatically playing a video or automatically focusing a form control).

<iframe src="https://muthukumaran-m.github.io/" sandbox></iframe>

Check this for more info

Answer 4

Assuming you have iframe in a same domain:

You can do this :

$("#foo").on('load', function() {
    $("body",parent.document).focus()
};

Answer 5

It is already 2019 and I kept on having the same issue on some of my mobile websites. The focus kept on being stolen by the contact form near the footer.

My rushed method may not be the most elegant way of doing this, but by modifying your iframe form to be hidden on mobile devices , with an expand/collapse button to make it visible on demand, you'll stop this jump from happening.

The simplified code:

 <div class="d-block d-sm-none visible-xs"><!-- show only on mobile devices -->

   <a class="btn" data-toggle="collapse" href="#blockToControlID" role="button" 
    aria-expanded="false" aria-controls="blockToControlID">
    Expand/Collapse iframe Block
   </a>

   <div class="collapse" id="blockToControlID">
     <div class="card card-body">
       <iframe src="path-to-form"></iframe>
     </div>
   <div>

 </div>

 <div class="d-none d-sm-block hidden-xs"><!-- hide on mobile devices -->
   <iframe src="path-to-form"></iframe>
 </div>

For bootstrap 3 you would use visible-xs and hidden-xs to hide or show the snippets of code.

For bootstrap 4 you would use the "d-block d-sm-none" to show the mobile-only code; and "d-none d-sm-block" to hide the mobile-only code.

Scripts needed on footer:

 <script src="js/jquery/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
 <script src="js/bootstrap/bootstrap.bundle.min.js"></script>

The jQuery version will depend on your bootstrap 3 or 4 setup. popper.js must be loaded before bootstrap.js, otherwise it'll fail to work.

Prior to reaching this hack, I tried every possible thing. Sadly, none of the JS, jQuery and reCaptcha hacks posted by other members and forums worked. The page load would always default to the form.

While the solution could be nicer with some js/ajax/jquery or even php, this simple code is quick and works fine with bootstrap enabled websites. Modify as needed.

I hope this helps