'Chrome does not trigger focus and blur events for document in content editable iframe

I'm changing the iframe content while it is focused. It works in Firefox but focus and blur event does not trigger in Google Chrome!

var iframe = $('#iframe').get(0);
iframe.onload = function(){
    
    iframeDoc = $(iframe.contentWindow.document);
    iframeDoc.focus(function(){
        alert('focused');
    }).blur(function(){alert('blur');
        alert('blured');
    });
    
}

Nevertheless, Other event like keyup, keypress are working. Do you know what's the problem and how to handle it?

Solution 1:^[1]

In Chrome the iFrame document doesn't have a focus or blur event, the window does :

var iframe  = document.getElementById('iframe');
var iWindow = iframe.contentWindow;

iWindow.onfocus = function(){
    console.log('focused');
}
iWindow.onblur = function(){
    console.log('blured');
}

FIDDLE

Solution 2:^[2]

According to http://api.jquery.com/focus/, focus can only be used on certain elements (mostly form elements). You probably need to look into catching a click event from within the iframe on the body tag to figure out if a user is interacting with it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	adeneo
Solution 2	Steven V

'Chrome does not trigger focus and blur events for document in content editable iframe

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]