Unable to lose focus from an iframe on keypress

Question

I have a iframe in my html page. I have attached key events on my html document.

When I pressed "a" or "z" I can do something like addClass or removeClass.

So in that block when I try to add focus to an iframe it gets added. But with a key event I cannot lose focus (blur) an iframe.

Here is the sample code:

    switch (myKey) {
        case 'a':
            $('div').append("<p>a pressed</p>");
            $("iframe").addClass("thick");
            $("iframe").focus();
            break;
        case 'z':
            $('div').append("<p>z pressed</p>");
            $("iframe").removeClass("thick");
            $("iframe").blur();
            break;
        default:
            //console.log('keycode', keycode);
    }

Can any one help me and tell me where it is wrong?

Fiddle - http://jsfiddle.net/hgXyq/70/

Answer 1

You are changing the active DOM. You need to add an extra code to make it work on iframe too (or get back to document). Simply I added this line, and it worked for me. However you can change it to something else to get back to document.

...
$(document).on('keydown keyup keypress', documentKeys);
$('iframe').on('keydown keyup keypress', documentKeys); //This line was added

Answer 2

Since your focus is in the iframe, your keypress will end up in the iframe. Your parent web page will not know about the keypress. So, you have to have your 'z' listener within the iframe, and then tell the parent web page to remove focus.

When your iframe gets the keypress, you should use html5 postMessage to communicate between iframe and parent (iframe tells the parent to remove focus). There are also jquery plugins which will use different fallback techniques when postMessage is not supported.

Answer 3

Your example works in Firefox but not in Chrome. This is because Chrome does not support certain events on certain elements. More here: http://www.quirksmode.org/dom/events/blurfocus.html

To avoid putting code on the iframe child page, especially because yours is an PDF :)), we just need to add another listener to the parent page.

Add this line under your $(document).on() event

$($("iframe").get(0).contentWindow.document).keypress(documentKeys);

NOTE: This will work in all browsers, however your iFrame (child) page, and the parent page MUST be on the same domain. So to test this properly, just run it on Localhost (or directly on your server)

JsFiddle here: http://jsfiddle.net/pw8qb/3/

Hope this helps!

Answer 4

When you set the focus to iframe, the parent frame loses control. Child frame takes over.

Try handling 'z' key press on child frame and set the focus back to parent frame.

Answer 5

Simply,Its Impossible if page is External.

But their is a trick to loss focus, its not so good !

As i read all other post here,

Your Code is works on some browser's but not for chrome !!

So this trick is only for those type of browser's,

If this condition is occurs with me, then I use :

setInterval / setTimeout : To loss focus automatically from iframe,and if user continuously press up arrow or down arrow ( but not press z) to read PDF then again focus is set to iframe and wait for not pressing up arrow or down arrow ! with Interval ,So Every time the focus is on iframe then is set only for a specific time and after that it loss that focus ! If user want to read again then set focus for again specific time!

I don't know if my trick is works exactly, for you but by using setInterval / setTimeout you may have some solution to solve this out!!

An another Trick is, to make your iframe Internal:

It is done by ,get your link content (that you set on iframe,like here .pdf) into a blob() and use url.createobjecturl(blob) and set it as iframe source!

Now the iframe is under control of your's,And what ever the event you want to add/remove can be achieved if you are able to set blob() as iframe src.

EXAMPLE

This is only the bad way to achieve this horrible task !!

Somewhat this helps you...