Web Programming Scripting Frames and Multiple Windows AND Images

Frames: Parents and Children Single-frame window and document hierarchy

Frames: Parents and Children Cont… Two-frame window and document hierarchy

References among Family Members Given the frame structure of above Figure, it’s time to look at how a script in any one of those windows can access objects, functions, or variables in the others. An important point to remember about this facility is that if a script has access to an object, function, or global variable in its own window, that same item can be reached by a script from another frame in the hierarchy (provided both documents come from the same Web server). Parent-to-child references [window.]frames[n].ObjFuncVarName [window.]frames[“frameName”].ObjFuncVarName [window.]frameName.ObjFuncVarName Probably the least common direction taken by references is when a script in the parent document needs to access some element of one of its frames. The parent contains two or more frames, which means the parent maintains an array of the child frame objects. You can address a frame by array syntax or by the name you assign to it with the name attribute inside the tag. In the following examples of reference syntax, I substitute a placeholder named ObjFuncVarName for whatever object, function, or global variable you intend to access in the distant window or frame. Remember that each visible frame contains a document object, which is generally the container of elements you script—be sure references to the elements include document.

References among Family Members Cont… Child-to-parent references It is not uncommon to place scripts in the parent (in the Head portion) that multiple child frames or multiple documents in a frame use as a kind of script library. By loading in the frameset, these scripts load only once while the frameset is visible. If other documents from the same server load into the frames over time, they can take advantage of the parent’s scripts without having to load their own copies into the browser. From the child’s point of view, the next level up the hierarchy is called the parent. Therefore, a reference from a child frame to items at the parent level is simply parent.ObjFuncVarName If the item accessed in the parent is a function that returns a value, the returned value transcends the parent/child borders down to the child without hesitation. When the parent window is also at the very top of the object hierarchy currently loaded into the browser, you can optionally refer to it as the top window, as in top.ObjFuncVarName Using the top reference can be hazardous if for some reason your Web page gets displayed in some other Web site’s frameset. What is your top window is not the master frameset’s top window. Therefore, I recommend using the parent reference whenever possible (unless you want to blow away an unwanted framer of your Web site).

References among Family Members Cont… Child-to-child references The browser needs a bit more assistance when it comes to getting one child window to communicate with one of its siblings. One of the properties of any window or frame is its parent (whose value is null for a single window). A reference must use the parent property to work its way out of the current frame to a point that both child frames have in common—the parent in this case. Once the reference is at the parent level, the rest of the reference can carry on as if starting at the parent. Thus, from one child to one of its siblings, you can use any of the following reference formats: parent.frames[n].ObjFuncVarName parent.frames[“frameName”].ObjFuncVarName parent.frameName.ObjFuncVarName A reference from the other sibling back to the first looks the same, but the frames[] array index or frameName part of the reference differs. Of course, much more complex frame hierarchies exist in HTML. Even so, the object model and referencing scheme provide a solution for the most deeply nested and gnarled frame arrangement you can think of— following the same precepts you just learned.

Frame Scripting Tips One of the first mistakes that frame scripting newcomers make is writing immediate script statements that call upon other frames while the pages load. The problem here is that you cannot rely on the document loading sequence to follow the frameset source code order. All you know for sure is that the parent document begins loading first. Regardless of the order of tags, child frames can begin loading at any time. Moreover, a frame’s loading time depends on other elements in the document, such as images or Java applets. Fortunately, you can use a certain technique to initiate a script once all of the documents in the frameset are completely loaded. Just as the onload event handler for a document fires when that document is fully loaded, a parent’s onload event handler fires after the onload event handler in its child frames is fired. Therefore, you can specify an onload event handler in the tag. That handler might invoke a function in the framesetting document that then has the freedom to tap the objects, functions, or variables of all frames throughout the object hierarchy. If you start with a reference to the frame element object, you can still reach a reference to the document object loaded into that frame. But the syntax is different depending on the browser. IE4+ and Safari let you use the same document reference as for a window; Mozilla-based browsers follow the W3C DOM standard more closely, using the contentDocument property of the frame element. To accommodate both syntaxes you can build a reference as follows: var docObj; var frameObj = document.getElementById(“myFrame”); if (frameObj.contentDocument) { docObj = frameObj.contentDocument; } else { docObj = frameObj.document; }

A Graphical Navigation Bar Navigation Bar <!-- start function goNext() { var currOffset = parseInt(parent.currTitle); if (currOffset < 5) { currOffset += 1; parent.entryForms.location.href = “dh” + currOffset + “.htm”; parent.instructions.location.hash = “help” + currOffset; } else { alert(“This is the last form.”); }

A Graphical Navigation Bar cont… function goPrev() { var currOffset = parseInt(parent.currTitle); if (currOffset > 1) { currOffset -= 1; parent.entryForms.location.href = “dh” + currOffset + “.htm”; parent.instructions.location.hash = “help” + currOffset; } else { alert(“This is the first form.”); } // end -->

References for Multiple Windows A Main Window Document Main Document function newWindow() { window.open(“subwind.htm”,”sub”,”height=200,width=200”); } Text incoming from subwindow:

References for Multiple Windows Cont… A Subwindow Document A SubDocument Enter text to be copied to the main window: <input type=”text” onchange=”opener.document.forms[0].entry.v alue = this.value”>

The Image Object One of the objects contained by the document is the image object— supported in all scriptable browsers since the days of NN3 and IE4. Image object references for a document are stored in the object model as an array belonging to the document object. You can therefore reference an image by array index or image name. Moreover, the array index can be a string version of the image’s name. Thus, all of the following are valid references to an image object: document.images[n] document.images[“imageName”] document.imageName Precaching images JavaScript comes to the rescue by enabling scripts to load images into the browser’s memory cache without displaying the image, a technique called precaching images. The tactic that works best is to preload the image into the browser’s image cache while the page initially loads. Users are less impatient for those few extra seconds as the main page loads than waiting for an image to download in response to some mouse action. var myImage = new Image(width, height); myImage.src = “someArt.gif”;

Precaching images Image Object // initialize empty array var imageLibrary = new Array(); // pre-cache four images imageLibrary[“image1”] = new Image(120,90); imageLibrary[“image1”].src = “desk1.gif”; imageLibrary[“image2”] = new Image(120,90); imageLibrary[“image2”].src = “desk2.gif”; imageLibrary[“image3”] = new Image(120,90); imageLibrary[“image3”].src = “desk3.gif”; imageLibrary[“image4”] = new Image(120,90); imageLibrary[“image4”].src = “desk4.gif”; // load an image chosen from select list function loadCached(list) { var img = list.options[list.selectedIndex].value; document.thumbnail.src = imageLibrary[img].src; } Image Object Bands Clips Lamp Erasers

Creating image rollovers A favorite technique to add some pseudo-excitement to a page is to swap button images as the user rolls the cursor atop them. The degree of change to the image is largely a matter of taste. The effect can be subtle—a slight highlight or glow around the edge of the original image—or drastic—a radical change of color. Whatever your approach, the scripting is the Same. When several of these graphical buttons occur in a group, I tend to organize the memory image objects as arrays and create naming and numbering schemes that facilitate working with the arrays. This is the most complex and lengthiest listing of the tutorial, so it requires a bit of explanation asit goes along. Jukebox/Image Rollovers if (document.images) { // precache all ‘off’ button images var offImgArray = new Array(); offImgArray[“play”] = new Image(75,33); offImgArray[“stop”] = new Image(75,33); offImgArray[“pause”] = new Image(75,33); offImgArray[“rewind”] = new Image(86,33);

Creating image rollovers Cont… // off image array -- set ‘off’ image path for each button offImgArray[“play”].src = “images/playoff.jpg”; offImgArray[“stop”].src = “images/stopoff.jpg”; offImgArray[“pause”].src = “images/pauseoff.jpg”; offImgArray[“rewind”].src = “images/rewindoff.jpg”; // precache all ‘on’ button images var onImgArray = new Array(); onImgArray[“play”] = new Image(75,33); onImgArray[“stop”] = new Image(75,33); onImgArray[“pause”] = new Image(75,33); onImgArray[“rewind”] = new Image(86,33); // on image array -- set ‘on’ image path for each button onImgArray[“play”].src = “images/playon.jpg”; onImgArray[“stop”].src = “images/stopon.jpg”; onImgArray[“pause”].src = “images/pauseon.jpg”; onImgArray[“rewind”].src = “images/rewindon.jpg”; }

Creating image rollovers Cont… // functions that swap images & status bar function imageOn(imgName) { if (document.images) { document.images[imgName].src = onImgArray[imgName].src; } function imageOff(imgName) { if (document.images) { document.images[imgName].src = offImgArray[imgName].src; } function setMsg(msg) { window.status = msg; return true; }

Creating image rollovers Cont… // controller functions (disabled) function playIt() { } function stopIt() { } function pauseIt(){ } function rewindIt() { } Jukebox Controls

Creating image rollovers Cont… <a href=”javascript:playIt()” onmouseover=”imageOn(‘play’); return setMsg(‘Play the selected tune’)” onmouseout=”imageOff(‘play’); return setMsg(‘’)”> <a href=”javascript:stopIt()” onmouseover=”imageOn(‘stop’); return setMsg(‘Stop the playing tune’)” onmouseout=”imageOff(‘stop’); return setMsg(‘’)”> <a href=”javascript:pauseIt()” onmouseover=”imageOn(‘pause’); return setMsg(‘Pause the playing tune’)” onmouseout=”imageOff(‘pause’); return setMsg(‘’)”> <a href=”javascript:rewindIt()” onmouseover=”imageOn(‘rewind’); return setMsg(‘Rewind back to the beginning’)” onmouseout=”imageOff(‘rewind’); return setMsg(‘’)”>

Thanks