CODEWITHSUNDEEP
javascriptjqueryiframefocusembed
rmmoul
rmmoul

Reputation: 3217

Prevent iframe from keeping focus using jquery

Background:

I'm helping an old friend who has a mixed media slideshow, and one of the slides is an iframe embed of a lytro camera image (it's interactive and you can click or tap on mobile to change the focus).

Issue:

The issue that I'm having is that when you interact with the iframe, it steals keyboard focus on desktops and that prevents the arrow keys from allowing you to change slides.

What I've tried:

My main attack angle on this had been trying to use jquery to set a timer that periodically sets focus on the parent document, to remove focus from the iframe and allow the keystrokes to be captured properly. I've noticed that if I click anywhere outside of the iframe then I can use the arrow keys properly.

Here's my jquery code, along with comments about why I tried each method. Unfortunatly nothing has worked (I've also tried including the lytro image with an embed tag instead of the iframe tag with no change in results).

<script>
    //make sure body maintains focus, so that swipe and arrows still work
    function focusit(){
        $('#focushere').focus(); // this is a div on the main page that I tried to set focus to
        $('body').focus(); // tried moving focus to the body
        $('embed').blur(); // tried bluring the embed
        $('iframe').blur(); // tried bluring the iframe
        $('body').click(); // tried faking a click on the body 
        $('#focushere').click(); //tried faking a click on a element 
        $(document).click(); // tried click on document
        $(document).focus(); //tried setting focus to document
    }
    setTimeout(focusit, 100);
</script>

Upvotes: 0

Views: 2589

Answers (1)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60527

Your issue seems to be two-fold.

  1. You are using setTimeout which will only run your callback once. I think you mean to use setInterval, which will repeatedly run the callback.

  2. You can't set focus to document using the focus method natively or in jQuery. In order to restore focus to the body, you should call the blur method on the currently active element using document.activeElement.

Example:

function focusit(){
    if(document.activeElement)
    {
        document.activeElement.blur();
    }
}
setInterval(focusit, 100);

CodePen Demo

Upvotes: 1

Related Questions