CD-332 Part VI ✦ Appendixes IFRAME. The if condition checks whether the property is set to something other than no. This test allows the condition to evaluate to true if the property is set to either auto (the first time) or yes (as set by the function). function toggleFrameScroll(frameID) { // IE5 & NN6 version var theFrame = document.getElementById(frameID) // IE4+ version // var theFrame = document.all[frameID] if (theFrame.scrolling != “no”) { theFrame.scrolling = “no” } else { theFrame.scrolling = “yes” } } src NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example For best results, use fully formed URLs as value for the src property, as shown here: document.getElementById(“myIframe”).src = “http://www.dannyg.com” Relative URLs and javascript: pseudo-URLs also work most of the time. popup Object Properties document NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ popupObject.document CD-333 Appendix F ✦ Examples from Parts III and IV Example Use The Evaluator (Chapter 13) to experiment with the popup object and its proper- ties. Enter the following statements into the top text box. The first statement cre- ates a pop-up window, whose reference is assigned to the a global variable. Next, a reference to the body of the pop-up’s document is preserved in the b variable for the sake of convenience. Further statements work with thest two variables. a = window.createPopup() b = a.document.body b.style.border = “solid 2px black” b.style.padding = “5px” b.innerHTML = “<P>Here is some text in a popup window</P>” a.show(200,100, 200, 50, document.body) See the description of the show() method for details on the parameters. isOpen NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example Use The Evaluator (Chapter 13) to experiment with the isOpen property. Enter the following statements into the top text box. The sequence begins with a creation of a simple pop-up window, whose reference is assigned to the a global variable. Note that the final statement is actually two statements, designed so that the second statement executes while the pop-up window is still open. a = window.createPopup() a.document.body.innerHTML = “<P>Here is a popup window</P>” a.show(200,100, 200, 50, document.body); alert(“Popup is open:” + a.isOpen) If you then click into the main window to hide the pop-up, you will see a different result if you enter the following statement into the top text box by itself: alert(“Popup is open:” + a.isOpen) popupObject.isOpen CD-334 Part VI ✦ Appendixes Methods hide() show(left, top, width, height [, positioningElementRef]) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example Listing 16-49 demonstrates both the show() and hide() methods for a popup object. A click of the button on the page invokes the selfTimer() function, which acts as the main routine for this page. The goal is to produce a pop-up window that “self-destructs” five seconds after it appears. Along the way, a message in the pop- up counts down the seconds. A reference to the pop-up window is preserved as a global variable, called popup. After the popup object is created, the initContent() function stuffs the content into the pop-up by way of assigning style properties and some innerHTML for the body of the document that is automatically created when the pop-up is generated. A SPAN element is defined so that another function later on can modify the content of just that segment of text in the pop-up. Notice that the assignment of content to the pop-up is predicated on the pop-up window having been initialized (by virtue of the popup variable having a value assigned to it) and that the pop-up window is not showing. While invoking initContent() under any other circumstances is probably impossible, the validation of the desired conditions is good programming practice. Back in selfTimer(), the popup object is displayed. Defining the desired size requires some trial and error to make sure the pop-up window comfortably accom- modates the text that is put into the pop-up in the initContent() function. With the pop-up window showing, now is the time to invoke the countDown() func- tion. Before the function performs any action, it validates that the pop-up has been initialized and is still visible. If a user clicks the main window while the counter is counting down, this changes the value of the isOpen property to false, and noth- ing inside the if condition executes. This countDown() function grabs the inner text of the SPAN and uses paresInt() to extract just the integer number (using base 10 numbering, because we’re dealing with zero-leading numbers that can potentially be regarded as octal values). The condition of the if construction decreases the retrieved integer by one. If the popupObject.hide() CD-335 Appendix F ✦ Examples from Parts III and IV decremented value is zero, then the time is up, and the pop-up window is hidden with the popup global variable returned to its original, null value. But if the value is other than zero, then the inner text of the SPAN is set to the decremented value (with a leading zero), and the setTimeout() method is called upon to reinvoke the countDown() function in one second (1000 milliseconds). Listing 16-49: Hiding and Showing a Pop-up <HTML> <HEAD> <TITLE>popup Object</TITLE> <SCRIPT LANGUAGE=”JavaScript”> var popup function initContent() { if (popup && !popup.isOpen) { var popBody = popup.document.body popBody.style.border = “solid 3px red” popBody.style.padding = “10px” popBody.style.fontSize = “24pt” popBody.style.textAlign = “center” var bodyText = “<P>This popup will self-destruct in “ bodyText += “<SPAN ID=’counter’>05</SPAN>” bodyText += “ seconds </P>” popBody.innerHTML = bodyText } } function countDown() { if (popup && popup.isOpen) { var currCount = parseInt(popup.document.all.counter.innerText, 10) if ( currCount == 0) { popup.hide() popup = null } else { popup.document.all.counter.innerText = “0” + currCount setTimeout(“countDown()”, 1000) } } } function selfTimer() { popup = window.createPopup() initContent() popup.show(200,200,400,100,document.body) setTimeout(“countDown()”, 1000) } </SCRIPT> </HEAD> <BODY> Continued popupObject.hide() CD-336 Part VI ✦ Appendixes Listing 16-49 (continued) <FORM> <INPUT TYPE=”button” VALUE=”Impossible Mission” onClick=”selfTimer()”> </FORM> </BODY> </HTML> The hide() method here is invoked by a script that is running while the pop-up window is showing. Because a pop-up window automatically goes away if a user clicks the main window, it is highly unlikely that the hide() method would ever be invoked by itself in response to user action in the main window. If you want a script in the pop-up window to close the pop-up, use parentWindow.close(). Chapter 17 Examples The following sections contain examples from Chapter 17, “Location and History Objects.” Location Object Properties hash NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example When you load the script in Listing 17-1, adjust the size of the browser window so only one section is visible at a time. When you click a button, its script navigates to the next logical section in the progression and eventually takes you back to the top. windowObject.location.hash CD-337 Appendix F ✦ Examples from Parts III and IV Listing 17-1: A Document with Anchors <HTML> <HEAD> <TITLE>location.hash Property</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function goNextAnchor(where) { window.location.hash = where } </SCRIPT> </HEAD> <BODY> <A NAME=”start”><H1>Top</H1></A> <FORM> <INPUT TYPE=”button” NAME=”next” VALUE=”NEXT” onClick=”goNextAnchor(‘sec1’)”> </FORM> <HR> <A NAME=”sec1”><H1>Section 1</H1></A> <FORM> <INPUT TYPE=”button” NAME=”next” VALUE=”NEXT” onClick=”goNextAnchor(‘sec2’)”> </FORM> <HR> <A NAME=”sec2”><H1>Section 2</H1></A> <FORM> <INPUT TYPE=”button” NAME=”next” VALUE=”NEXT” onClick=”goNextAnchor(‘sec3’)”> </FORM> <HR> <A NAME=”sec3”><H1>Section 3</H1></A> <FORM> <INPUT TYPE=”button” NAME=”next” VALUE=”BACK TO TOP” onClick=”goNextAnchor(‘start’)”> </FORM> </BODY> </HTML> Anchor names are passed as parameters with each button’s onClick event handler. Instead of going through the work of assembling a window.location value in the function by appending a literal hash mark and the value for the anchor, here I sim- ply modify the hash property of the current window’s location. This is the pre- ferred, cleaner method. If you attempt to read back the window.location.hash property in an added line of script, however, the window’s actual URL probably will not have been updated yet, and the browser will appear to be giving your script false information. To prevent this windowObject.location.hash CD-338 Part VI ✦ Appendixes problem in subsequent statements of the same function, construct the URLs of those statements from the same variable values you use to set the window.location.hash property — don’t rely on the browser to give you the values you expect. host NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example Use the documents in Listings 17-2 through 17-4 as tools to help you learn the val- ues that the various window.location properties return. In the browser, open the file for Listing 17-2. This file creates a two-frame window. The left frame contains a temporary placeholder (Listing 17-4) that displays some instructions. The right frame has a document (Listing 17-3) that enables you to load URLs into the left frame and get readings on three different windows available: the parent window (which creates the multiframe window), the left frame, and the right frame. Listing 17-2: Frameset for the Property Picker <HTML> <HEAD> <TITLE>window.location Properties</TITLE> </HEAD> <FRAMESET COLS=”50%,50%” BORDER=1 BORDERCOLOR=”black”> <FRAME NAME=”Frame1” SRC=”lst17-04.htm”> <FRAME NAME=”Frame2” SRC=”lst17-03.htm”> </FRAMESET> </HTML> Listing 17-3: Property Picker <HTML> <HEAD> <TITLE>Property Picker</TITLE> <SCRIPT LANGUAGE=”JavaScript”> var isNav4 = (navigator.appName == “Netscape” && navigator.appVersion.charAt(0) >= 4) ? true : false windowObject.location.host CD-339 Appendix F ✦ Examples from Parts III and IV function fillLeftFrame() { newURL = prompt(“Enter the URL of a document to show in the left frame:”,””) if (newURL != null && newURL != “”) { parent.frames[0].location = newURL } } function showLocationData(form) { for (var i = 0; i <3; i++) { if (form.whichFrame[i].checked) { var windName = form.whichFrame[i].value break } } var theWind = “” + windName + “.location” if (isNav4) { netscape.security.PrivilegeManager.enablePrivilege(“UniversalBrowserRead”) } var theObj = eval(theWind) form.windName.value = windName form.windHash.value = theObj.hash form.windHost.value = theObj.host form.windHostname.value = theObj.hostname form.windHref.value = theObj.href form.windPath.value = theObj.pathname form.windPort.value = theObj.port form.windProtocol.value = theObj.protocol form.windSearch.value = theObj.search if (isNav4) { netscape.security.PrivilegeManager.disablePrivilege(“UniversalBrowserRead”) } } </SCRIPT> </HEAD> <BODY> Click the “Open URL” button to enter the location of an HTML document to display in the left frame of this window. <FORM> <INPUT TYPE=”button” NAME=”opener” VALUE=”Open URL ” onClick=”fillLeftFrame()”> <HR> <CENTER> Select a window/frame. Then click the “Show Location Properties” button to view each window.location property value for the desired window.<P> <INPUT TYPE=”radio” NAME=”whichFrame” VALUE=”parent” CHECKED>Parent window <INPUT TYPE=”radio” NAME=”whichFrame” VALUE=”parent.frames[0]”>Left frame <INPUT TYPE=”radio” NAME=”whichFrame” VALUE=”parent.frames[1]”>This frame <P> <INPUT TYPE=”button” NAME=”getProperties” VALUE=”Show Location Properties” onClick=”showLocationData(this.form)”> Continued windowObject.location.host CD-340 Part VI ✦ Appendixes Listing 17-3 (continued) <INPUT TYPE=”reset” VALUE=”Clear”><P> <TABLE BORDER=2> <TR><TD ALIGN=right>Window:</TD><TD><INPUT TYPE=”text” NAME=”windName” SIZE=30></TD></TR> <TR><TD ALIGN=right>hash:</TD> <TD><INPUT TYPE=”text” NAME=”windHash” SIZE=30></TD></TR> <TR><TD ALIGN=right>host:</TD> <TD><INPUT TYPE=”text” NAME=”windHost” SIZE=30></TD></TR> <TR><TD ALIGN=right>hostname:</TD> <TD><INPUT TYPE=”text” NAME=”windHostname” SIZE=30></TD></TR> <TR><TD ALIGN=right>href:</TD> <TD><TEXTAREA NAME=”windHref” ROWS=3 COLS=30 WRAP=”soft”> </TEXTAREA></TD></TR> <TR><TD ALIGN=right>pathname:</TD> <TD><TEXTAREA NAME=”windPath” ROWS=3 COLS=30 WRAP=”soft”> </TEXTAREA></TD></TR> <TR><TD ALIGN=right>port:</TD> <TD><INPUT TYPE=”text” NAME=”windPort” SIZE=30></TD></TR> <TR><TD ALIGN=right>protocol:</TD> <TD><INPUT TYPE=”text” NAME=”windProtocol” SIZE=30></TD></TR> <TR><TD ALIGN=right>search:</TD> <TD><TEXTAREA NAME=”windSearch” ROWS=3 COLS=30 WRAP=”soft”> </TEXTAREA></TD></TR> </TABLE> </CENTER> </FORM> </BODY> </HTML> Listing 17-4: Placeholder Document for Listing 17-2 <HTML> <HEAD> <TITLE>Opening Placeholder</TITLE> </HEAD> <BODY> windowObject.location.host CD-341 Appendix F ✦ Examples from Parts III and IV Initial placeholder. Experiment with other URLs for this frame (see right). </BODY> </HTML> Figure 17-1 shows the dual-frame browser window with the left frame loaded with a page from my Web site. Figure 17-1: Browser window loaded to investigate window.location properties For the best results, open a URL to a Web document on the network from the same domain and server from which you load the listings (perhaps your local hard disk). If possible, load a document that includes anchor points to navigate through a long document. Click the Left frame radio button, and then click the button that shows all properties. This action fills the table in the right frame with all the available location properties for the selected window. Figure 17-2 shows the complete results for a page from my Web site that is set to an anchor point. Attempts to retrieve these properties from URLs outside of your domain and server result in a variety of responses based on your browser and browser version. NN2 returns null values for all properties. NN3 presents an “access disallowed” security windowObject.location.host . that can potentially be regarded as octal values). The condition of the if construction decreases the retrieved integer by one. If the popupObject.hide() CD-335 Appendix F ✦ Examples from Parts. top. windowObject.location.hash CD-337 Appendix F ✦ Examples from Parts III and IV Listing 17-1: A Document with Anchors <HTML> <HEAD> <TITLE>location.hash Property</TITLE> <SCRIPT LANGUAGE= JavaScript > function. LANGUAGE= JavaScript > var isNav4 = (navigator.appName == “Netscape” && navigator.appVersion.charAt(0) >= 4) ? true : false windowObject.location.host CD-339 Appendix F ✦ Examples from Parts