Problem:
A number of problems come up when using Flash to load HTML pages into an
iFrame that is overlayed on the Flash. At first using getURL to load a page
directly into a named frame would result in the page loading into a new window.
The solution is to use getURL to call a javascript function in the HTML to do
the loading. The next problem occurs when clicking anywhere on the Flash, the
Flash comes to the foreground and hides the iFrame. This happens when Flash is
placed in the HTML with an <object> tag. The browser treats it like a window
that gets the focus and sits over content in the parent window. The solution is
to load the SWF with a javascript function rather than use the <object> and
<embed> tags. Also place the swf and iFrame inside <div> tags with z-index
settings that keep the swf in a lower layer. I used a freeware script called
swfObject (see link at end of the post to download it).
Solution:
1. In Flash, this Actionscript code calls a javascript function named
setContent, which loads HTML content into the iFrame. Pay attention to syntax
for concatenating a var with the javascript.
getURL("javascript:setContent('mypage.htm')");
OR pass a var to the function:
var pageLoad="'mypage.htm";
getURL("javascript:setContent("+"'"+pageLoad+"'"+")");
2. In HTML wrapper (where Flash movie and iFrame are placed), first load
swfobject.js that will load the Flash movie. This is placed in the <head>
section. Then place the setContent function between the <head> and <body> tags.
The function is passed a file name from the Flash and this becomes the source
for the iFrame named 'mydiv'. Optionally, put content into the iFrame so
something is there when the page loads. This is done by calling setContent from
the <body> tag.
. (shortened for clarity)
.
<head>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<script type="text/javascript">
function setContent (whichcontent) {
document.getElementById("mydiv").src=whichcontent;
}
</script>
<body onLoad=javascript:setContent('startPage.htm');>
3. Set up a div to hold the Flash. The Flash will be written to this div by
swfobject. Size and position the div and make the z-index value = 1. The div
presently contains a message if Flash load fails, due to detection of no Flash
plugin or wrong Flash version. The detection can also be bypassed with code
indicated below. After that comes the javascript that calls swfobject to load
the swf and sets parameters. You must set wmode and allowscriptaccess.
swfobject then writes the swf into flashcontent div. Finally, place the iFrame
in a div. Give the iFrame the id name used by setContent function. Position the
div which hold the iFrame where you want in relation to the underlying swf.
Give the div a higher z-index number than the div which holds the swf.
<div id="flashcontent" style="position:absolute; width:550px; height:400px;
z-index:1; left: 0px; top: 0px;"> [B]You need to upgrade your Flash Player[/B]
This is replaced by the Flash content. Place your alternate content here and
users without the Flash plugin or with Javascript turned off will see this.
Content here allows you to leave out <code>noscript</code> tags. Include a link
to <a href="swfobject.html?detectflash=false">bypass the detection</a> if you
wish. </div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("myFlashMovie.swf", "myMovieName", "550px", "400px",
"8", "#FFFFFF");
so.addParam("quality", "high");
so.addParam("wmode", "transparent");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
// ]]>
</script>
<div id="Layer1" style="position:absolute; width:400px; height:350px;
z-index:10; left: 125px; top: 25px;">
<iframe id='mydiv' height="350" width="400"></iframe>
</div>
REFERENCES: many thanks to the authors of the following posts, especially to
d~l in the openlaszlo forum who solved the layering problem. Please refer to
these for more background information about this topic:
http://forum.openlaszlo.org/showthread.php?t=7251 http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx http://support.microsoft.com/default.aspx?scid=http://support.microsoft.com:80/s
upport/kb/articles/q177/3/78.asp&NoWebContent=1
SWFobject can be obtained here:
http://blog.deconcept.com/swfobject/#howitworks
