May 20, 2001 - Sharing Methods among Frames | WebReference

May 20, 2001 - Sharing Methods among Frames

Yehuda Shiran May 20, 2001
Sharing Methods among Frames
Tips: May 2001

Yehuda Shiran, Ph.D.
Doc JavaScript

In some of your applications you may need to use Flash Audio and JavaScript directly, without any prepackaged APIs such as FlashSound JavaScript API. You will enjoy more features, methods, and properties, but you'll have to take care of all the tiny details that are taken for granted when using FlashSound API.

One of these "tiny" details is embedding the sound track on each and every page you want to sonify. This may become a nightmare for maintenance, once you want to change the embedded track on all pages. Another way to embed a sound track is to use an invisible frame for the sound, and change only the visible frame. In this way, we have a site that includes two frames: one fixed frame with the embedded SWFs, and one frame that hosts the regular site's Web page. When we jump from this frame to another Web page, the new page positions itself in the same frame under the same frameset. All Web site's pages access the same Flash sound object in the invisible frame. In this way, you maintain the sound embedding in a single file, serving all Web site's pages. You access an object or a method from another frame like this:

top.frameName.method()
Let's see these frames in a demo. Our invisible frame is called swf, and it includes the hello() function:

function hello() {
  alert("Hello World");
}

Click here to see a page with two frames, one invisible and one visible. Click the Hello from Invisible link and invoke the hello() function from the invisible frame. Click the Next link and flip the page to 010520d.html. Notice that the browser's URL is still 010519a.html. The visible frame's content has changed, but the frame is still under its original frameset. This is the code for the FRAMESET page:

<HTML>
<HEAD>
<TITLE>Flash sound with Frames</title>
</HEAD>
<FRAMESET FRAMESPACING="0" BORDER="false" ROWS="1,*" FRAMEBORDER="0">
  <FRAME NAME="swf" SCROLLING="no" NORESIZE TARGET="main" SRC="010520b.html"
  MARGINWIDTH="1" MARGINHEIGHT="1">
  <FRAME NAME="main" src="010520c.html" scrolling="auto">
  <NOFRAMES>
  <BODY>
  <P>This page uses frames, but your browser doesn't support them.</P>
  </BODY>
  </NOFRAMES>
</FRAMESET>
</HTML>

This is the code for the invisible frame:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="flashsoundcheck.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function hello() {
  alert("Hello World");
}
</SCRIPT>
<TITLE>INVISIBLE FRAME</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
  Flash_embedSWF("animalsounds.swf");
</SCRIPT>
</BODY>
</HTML>

This is the code for the visible frame:

<HTML>
<HEAD>
<TITLE>VISIBLE FRAME</TITLE>
</HEAD>
<BODY>
<P>Hello World. This is 010520c.html.</P>
<A HREF="javascript://" onclick="top.swf.hello()">Hello from Invisible</A>
<P>
<A HREF="010520d.html">Next</a>
</BODY>
</HTML>

And this is the code for another visible frame:

<HTML>
<HEAD>
<TITLE>VISIBLE FRAME</TITLE>
</HEAD>
<BODY>
<P>Hello World. This is 010520d.html.</P>
<A HREF="javascript://" onclick="top.swf.hello()">Hello from Invisible</a>
</BODY>
</HTML>