How to use iframe with blur and focus

Question

I want to give action to iframe with blur and focus,

The scenario of my code is,I written a android question in webpage,beside that question I displayed android phone picture,what ever the code written below the question,the output will be shown in that picture and if you are out of browsing area,the title will shown as inactive.

action should be infocus or outfocus.

for this command I am writing,

<div class="andr_app">
  <iframe src=" <%= request.getContextPath()%>/images/mob_empty.png"       width="400px" height="800px" id="iFrameUrl${questionId}"  class="mobileDisplayIframe" frameborder="0" scrolling="no"></iframe>
 </div>

Please help me in this.

Answer 1

The iFrame element doesn't have focus or blur events, so you need to use the window.

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

iframeWindow.onfocus = function(){
    //focussed
}
iframeWindow.onblur = function(){
    //blurred
}

^{Reference: answer}

Answer 2

Finally I got my answer,but not in iframe. I change iframe to object,

<object data="<%= request.getContextPath()%>/images/mob_empty.png" width="325px" height="560px" style= "padding-right: 85px"; id="iFrameUrl${questionId}" id="iFrameUrl${questionId}"  class="mobileDisplayIframe" frameborder="0" scrolling="no">

 </object>