1

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?

Community
  • 1
  • 1
Aswin M R
  • 53
  • 9

1 Answers1

3

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

Robin J
  • 156
  • 5
  • @user3656699- Thanks for your idea. i have gone through the link and the postmessage topic. is that postmessage can be used only when both parent and iframe content should be own by me? (Reference [Link](http://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame)) since am facing issue - **Blocked a frame with cross origin**. – Aswin M R Feb 17 '17 at 07:11
  • Thanks for your postmessage idea. It worked for me. but i had to disable the cross-origin policy in my browser. since the two site are not own by me and different origin. – Aswin M R Feb 21 '17 at 07:00
  • @AswinMR Yes, if the content of the iframe is not owned by you, you are unable to see whats going on in there and postmessage would require an implementation part inside the iframe. (e.g. Think of a scenario where an iframe loads random pages and the wrapping page could grep username and password information automatically filled in by browser) – Robin J Feb 27 '17 at 09:24