JavaScript Bible, Gold Edition part 185 pot

function toggleFrameScrollframeID { // IE5 & NN6 version var theFrame = document.getElementByIdframeID // IE4+ version // var theFrame = document.all[frameID] if theFrame.scrolling != “n

Trang 1

IFRAME The ifcondition checks whether the property is set to something other than no This test allows the condition to evaluate to true ifthe 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

Example

For best results, use fully formed URLs as value for the srcproperty, 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

popupObject.document

Trang 2

Use The Evaluator (Chapter 13) to experiment with the popupobject 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 aglobal variable Next, a

reference to the body of the pop-up’s document is preserved in the bvariable 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

Example

Use The Evaluator (Chapter 13) to experiment with the isOpenproperty 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 aglobal 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

Trang 3

hide()

show(left, top, width, height

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 popupobject is created, the initContent()function stuffs the content into the pop-up by way of assigning styleproperties and some innerHTMLfor 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 popupvariable 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 popupobject 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 isOpenproperty to false, and noth-ing inside the ifcondition 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 ifconstruction decreases the retrieved integer by one If the

popupObject.hide()

Trang 4

decremented value is zero, then the time is up, and the pop-up window is hidden

with the popupglobal variable returned to its original, nullvalue 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>

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()

Trang 5

Listing 16-49 (continued)

<FORM>

</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

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

Trang 6

Listing 17-1: A Document with Anchors

<HTML>

<HEAD>

<TITLE>location.hash Property</TITLE>

function goNextAnchor(where) {

window.location.hash = where

}

</SCRIPT>

</HEAD>

<BODY>

<FORM>

</FORM>

<HR>

<A NAME=”sec1”><H1>Section 1</H1></A>

<FORM>

</FORM>

<HR>

<FORM>

</FORM>

<HR>

<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 onClickevent handler.

Instead of going through the work of assembling a window.locationvalue in the

function by appending a literal hash mark and the value for the anchor, here I

sim-ply modify the hashproperty of the current window’s location This is the

pre-ferred, cleaner method.

If you attempt to read back the window.location.hashproperty 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

Trang 7

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

Example

Use the documents in Listings 17-2 through 17-4 as tools to help you learn the val-ues that the various window.locationproperties 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>

</HTML>

Listing 17-3: Property Picker

<HTML>

<HEAD>

<TITLE>Property Picker</TITLE>

var isNav4 = (navigator.appName == “Netscape” && navigator.appVersion.charAt(0)

>= 4) ? true : false

windowObject.location.host

Trang 8

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>

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

Trang 9

Listing 17-3 (continued)

<TR><TD ALIGN=right>Window:</TD><TD><INPUT TYPE=”text” NAME=”windName” SIZE=30></TD></TR>

<TR><TD ALIGN=right>hostname:</TD>

</TEXTAREA></TD></TR>

<TR><TD ALIGN=right>pathname:</TD>

<TR><TD ALIGN=right>protocol:</TD>

<TR><TD ALIGN=right>search:</TD>

</TABLE>

</CENTER>

</FORM>

</BODY>

</HTML>

Listing 17-4: Placeholder Document for Listing 17-2

<HTML>

<HEAD>

<TITLE>Opening Placeholder</TITLE>

</HEAD>

<BODY>

Trang 10

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

locationproperties 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 nullvalues for all properties NN3 presents an “access disallowed” security

Định dạng
Số trang	10
Dung lượng	562,42 KB