Controlling Objects Between Frames

You can use JavaScript to control objects within one frame without much trouble. Controlling objects in another frame, however, is a little more complicated. To do this, rather than just passing the function the name of the object you want to change, you also have to pass the function the name of the frame the object is in.

In this example (Figure 16.15), a link in the bottom frame will cause the object in the top frame to move.

Figure 16.15. The Rabbit may be in a different frame, but the code will hunt him down and make him run.

To control elements in other frames:



Set up your frameset document, making sure to name the frames that will have dynamic content (Figure 16.16). Save this file as index.html (Code 16.9).

Figure 16.16. The frameset set up by index.html.

Code 16.9. In this example, I have set up a frame document (index.html) with frames named "topFrame" and "bottomFrame". The frames' sources are content.html and control.html, respectively. Notice that his uses the XHTML frameset DTD.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " /DTD/xhtml1-frameset.dtd"> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DHTML & CSS for the WWW | Dynamic Control Between Frames</title> </head> <frameset rows="*,50">      <frame src="/books/3/292/1/html/2/content.html" name="topFrame" scrolling="no" noresize="noresize"   />      <frame src="/books/3/292/1/html/2/controls.html" name="bottomFrame" scrolling="no" noresize="noresize"   /> <noframes><body><p>Frames not supported.</p></body></noframes> </frameset></html>



Now set up an HTML document with the objects to be controlled from the other frame. Include positioned objects with IDs that can be controlled with JavaScript (Code 16.10). In this example, I've set up an object called whiteRabbit. Save this file as content.html.

Code 16.10. The object whiteRabbit has been set up and can now be controlled from this frame or any other frame by adding the frame name to the path when finding the object.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xhtml1-strict.dtd"> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Content Frame</title> <style type="text/css" media="screen"> #whiteRabbit {      position: absolute;      top: 125px;      left: 350px; } </style> </head> <body> <div > <img src="/books/3/292/1/html/2/alice02.gif" height="300" width="200" alt="" /> </div> </body></html>



Set up the HTML document that will control the element in the other frame. You have to change the function moveObject() (shown earlier in this chapter in "Moving Objects from Point to Point") to become moveObjectFrame() to use the variable frameNamewhich, along with the objectID variable is used to find the object (Code 16.11):

var object = top[frameName]. document.getElementById(objectID);

Code 16.11. The code in controls.html uses a variation of the moveObject() function presented earlier in this chapter. The main difference is that the function is passed not only the ID of the object to be moved, but also the name of the frame the object is in.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xhtml1-strict.dtd"> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Controls Frame</title> <script type="text/javascript"> function moveObjectFrame(objectID, frameName, x, y){      var object = top[frameName].document.getElementById(objectID); = x + 'px'; = y + 'px'; } </script> </head> <body> <a href="#" onmouseover="moveObjectFrame('whiteRabbit', 'topFrame', 10, 10); return  false;" onmouseout="moveObjectFrame('whiteRabbit', 'topFrame', 350, 125); return false;"  >Run Rabbit, Run!</a> </body></html>


Save this file as controls.html.

Now, when you load the file index.html into a Web browser, the files content.html and controls.html are loaded into the frames. The bottom frame (bottomFrame) includes a link that controls the object whiteRabbit in the upper frame (topFrame).


  • Notice that the frames use the name attribute rather than id. The name attribute is being phased out for most uses, but frames will still use it.

  • This example shows you how to move an object across frames, but you can use any of the other dynamic functions described in this book in your frames.

  • For all intents and purposes, another window is like another frame. If you have two windows open, you can use this technique to communicate between two windows, as long as they're named. In addition, this will work with iframes.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: