CODEWITHSUNDEEP
javascriptjqueryiframebluronblur
Aswin M R
Aswin M R

Reputation: 53

IFrame inside my webpage triggering blur event

I have a countdown on my webpage along with an IFrame. Countdown will stop on $(window).blur and start on $(window).focus. When i click on the IFrame, it triggers the blur event and stops the countdown. I have solved this issues by following code line.

 $(window).blur(function () {
  if (document.activeElement.nodeName == "IFRAME") {
    //Continue timer
    else {
        //Stop timer
    }
 });

But, When i click outside the window immediately after clicking inside IFrame, Blur event is not getting triggered. Since blur event will not be triggered after a blur event unless focus event is triggered.

I have referred similar topics - $(window).blur event affecting Iframe and How can I capture the blur and focus of the entire browser window?

Any other Ideas?

Update- I did an another approach which lead me another step ahead. The following code is new approach 

$(window).on('focus', function () {
                            //Coundown runs
                    }).on('blur', function () {
                            //Coundown stops
                    });;

 $(document).ready(function () {
                var iframe = document.getElementById("iframeID");
                            $(iframe.contentWindow).on('focus', function (){
                                    //Coundown runs
                            }).on('blur', function () {
                                    //Coundown stops
                            });
                    });

This code will make countdown run on iframe focus and stop on iframe blur.

But, the issue i am facing in this approach is countdown working fine when "scr" not loaded in Iframe. if the "scr" is loaded in Iframe then focus and blur event for Iframe are not getting bind and countdown stops on Iframe click.

Any idea on this?

Upvotes: 1

Views: 2345

Answers (1)

Robin J
Robin J

Reputation: 156

I think the problem is, that as soon as content is loaded to your iframe it is isolated from the window by your browser (due to security conciderations).

You could use Window.postMessage() to communicate events between the main window and the iframe.

Have a look at Window postmessage

Upvotes: 3

Related Questions