body onFocus=functionname, not working on IE

heise_man
heise_man used Ask the Experts™
on
Hi, I'm working on a flash website and am having difficulty figuring out how to have a function triggered when the window becomes active. I am having limited success with:

<body onFocus=myFadeBack();>
*myFadeBack is a function which fades the window on/off depending on whether the window is active or not.

This code works fine with Firefox and Safari, but not Internet Explorer. Is there a way to achieve this in all 3 browsers?

Here is a link of the site (test) in action.
http://www.lukeheise.com/test5/

and here are the source files:
http://www.lukeheise.com/test5/flash_files.zip

Thanks.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2009

Commented:
I do not have IE right now... but try out this example.
when the focus is on page.. you will get an alert focus and then you minimize the window to lose focus you will get a alert blur..

you can even try using window.onfocus, this will trigger when the window is in focus..

<body onfocus="alert('focus');" onblur="alert('blur');">
</body>
 
 
<script type="text/javascript">
window.onfocus=function()
{
alert('focus');
};
window.onblur=function()
{
alert('blur');
};
</script>

Open in new window

Author

Commented:
Thanks Kadaba, that did work. It must be the window.onfocus that did it. However, it only seemed to worked for the alert example that you gave me.

When I apply it to my page, it fails:
http://www.lukeheise.com/test5/index9.html
* works in Firefox & Safari, but not Internet Explorer.

I'm not so much interested in the onblur code as I already have a solution for that. I'd just like for a function to be triggered when the page comes into focus.

Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
	body {
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
	}
	object {
		width: 100%;
		height: 1550px;
		display: block;
		outline: none;
	}
</style>
 
<script language="JavaScript"> 
function Launch(page, width, height) { 
  OpenWin = this.open(page, "kirupa", "toolbar=no, menubar=no ,location=no, scrollbars=no, resizable=no, width=" + width + ", height=" + height + ", top=" + (screen.height/2 - height/2) + ", left=" + (screen.width/2 - width/2) + "\""); 
	}
	
function getFlashMovieObject(movieName)
{
  if (window.document[movieName]) 
  {
    return window.document[movieName];
  }
  if (navigator.appName.indexOf("Microsoft Internet")==-1)
  {
    if (document.embeds && document.embeds[movieName])
      return document.embeds[movieName]; 
  }
  else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
  {
    return document.getElementById(movieName);
  }
}
 
function myFadeBack()
{
  var flashMovie=getFlashMovieObject("FlashID");
  flashMovie.TPlay("_level0.fadeanimation");
}
</script>
 
<script type="text/javascript">
window.onfocus=myFadeBack()
</script>
 
</head>
 
<body onfocus="myFadeBack()">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8.0.35.0"
 WIDTH="100%" HEIGHT="1550" id="FlashID" ALIGN="">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="index.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="bgcolor" value="#1E1B15" />
<embed src="index.swf" swliveconnect="true" wmode=opaque quality="high" scale="noscale" salign="lt" bgcolor="#1E1B15" width="100%" height="1550" NAME="FlashID" ALIGN="" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
 
</BODY>
</HTML>

Open in new window

Michel PlungjanIT Expert
Top Expert 2009

Commented:
the correct way of calling it is

<script type="text/javascript">
window.onfocus=myFadeBack; // replace the event handler
</script>
 
</head>
 
and remove it from here:
<body onfocus="myFadeBack()">



Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Thanks mplungjan, however it still does not work in Internet Explorer. Here is a link:
http://www.lukeheise.com/test5/index17.html

and below is the full code:

Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
	body {
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
	}
	object {
		width: 100%;
		height: 1550px;
		display: block;
		outline: none;
	}
</style>
 
<script language="JavaScript"> 
function Launch(page, width, height) { 
  OpenWin = this.open(page, "kirupa", "toolbar=no, menubar=no ,location=no, scrollbars=no, resizable=no, width=" + width + ", height=" + height + ", top=" + (screen.height/2 - height/2) + ", left=" + (screen.width/2 - width/2) + "\""); 
	}
	
function getFlashMovieObject(movieName)
{
  if (window.document[movieName]) 
  {
    return window.document[movieName];
  }
  if (navigator.appName.indexOf("Microsoft Internet")==-1)
  {
    if (document.embeds && document.embeds[movieName])
      return document.embeds[movieName]; 
  }
  else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
  {
    return document.getElementById(movieName);
  }
}
 
function myFadeBack()
{
  var flashMovie=getFlashMovieObject("FlashID");
  flashMovie.TPlay("_level0.fadeanimation");
}
</script>
 
<script type="text/javascript">
window.onfocus=myFadeBack;
</script>
 
</head>
 
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8.0.35.0"
 WIDTH="100%" HEIGHT="1550" id="FlashID" ALIGN="">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="index.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="bgcolor" value="#1E1B15" />
<embed src="index.swf" swliveconnect="true" wmode=opaque quality="high" scale="noscale" salign="lt" bgcolor="#1E1B15" width="100%" height="1550" NAME="FlashID" ALIGN="" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
 
</BODY>
</HTML>

Open in new window

Michel PlungjanIT Expert
Top Expert 2009

Commented:
Seems the onfocus does not trigger at all so the swf in the parent window has the focus at all times

I tried this:
window.onfocus=function(){alert('focussed')}

and it really does not trigger

I suggest you do

<body onBeforeUnload="if (opener && !opener.closed && opener.myFadeBack) opener.myFadeBack()"
in the child window


Author

Commented:
There are 2 problems with onBeforeUnload.

1) The function isn't triggered if you leave the pop up window open and click back to the main window. Some users will click back to the main window without closing the popup.

2) The function is triggered when the url of the pop up window changes, not just when it is closed. Some of my pop up windows contain navigation with multiple html pages inside. This is problematic because I don't want the parent window to unfade until it is active.

I have gone down this road before and it didn't work out very well. I thought a better solution would be something like onFocus but it seems to have it's fair share of problems too.

Any more ideas? Surely there must be a work around for Internet Explorer since it works fine in the other browsers.

Thanks.
Michel PlungjanIT Expert
Top Expert 2009

Commented:
trigger window.focus() from your swf onfocus
Michel PlungjanIT Expert
Top Expert 2009

Commented:

Author

Commented:
Are you familiar with Flash? Can you elaborate? I'm guessing it should be something like:

getURL("javascript:window.onfocus=myFadeBack");

... but I doubt that's right.

Thanks.
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Perhaps


getURL("javascript:swf.blur(); window.focus()");

or similar

Author

Commented:
Will this work with the above html, or do I need to make some further changes?

Also, should I put that code on a loop? I'm not sure what exactly it does.

Thanks.
Michel PlungjanIT Expert
Top Expert 2009

Commented:
I do not do AS so it was just a suggestion. Others can most likely tell you where to call this. In some focus event in the flash. The swf. should likely be replaced with document.getElementById('id of your flash object')

Author

Commented:
Thanks mplungjan. I tried what you said but unfortunately could not get it working. This is harder than I thought it would be, so I've put the point value up to 500. I'm open to html/javascript and Flash solutions. Maybe there's a way inside Flash to detect whether the stage has focus or not. I'm using Actionscript 2.0 so keep that in mind.

Thanks.
Send this from .js to flash via External interface.

see example attached - I had to run the .html file via localhost to get around flash security restrictions
FocusTest.zip.txt

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial