瀏覽器物件靜宜大學資管系蔡奇偉副教授. Netscape 瀏覽器物件 ( 類型 ) 的階層圖中有符號的為網頁中的單一物件。階層中的子物件是父物件

瀏覽器物件靜宜大學資管系蔡奇偉副教授

Netscape 瀏覽器物件 ( 類型 ) 的階層

圖中有符號的為網頁中的單一物件。

階層中的子物件是父物件的一項屬性。譬如：若某表單的名稱是 myform ，則此表單不僅是一個物件，也是 document 物件的一個屬性。

網頁的內建物件

navigator: has properties for the name and version of Navigator

being used, for the MIME types supported by the client, and for the plug-ins installed on the client.

window: the top-level object; has properties that apply to the entire

window. Each “child window” in a frames document also has a window object.

document: contains properties based on the content of the document, such as title, background color, links, and forms.location: has properties based on the current URL.

history: contains properties representing URLs the client has previously requested.

每一個開啟的網頁都具有以下的物件

文件階層

網頁文件是由巢狀結構的 HTML 元件所組成，此結構在 JavaScript 中形成文件階層。譬如：

<body><img ...><form ...>

<input type=text ...><input type=button...>...

</form></body>

documentdocument

imgimg formform

texttext buttonbutton

存取網頁物件指定網頁物件時，我們必須使用物件的名稱與其所有的上層物件（若是在同一個瀏覽器視窗，則可以省略最上層的 window 物件）。物件的名稱是由 HTML 元件的 NAME 屬性來設定。譬如：

<body><img name=img1...><form name=form1...>

<input type=text name=text1...><input type=button name=button1...>...

</form></body>

document.img1

document.form1

document.form1.text1

document.form1.button1

任何擺在表單之中的物件，不管是否為表單元件，都必須加上表單物件來指定。譬如：

<img name=img1...><form name=form1...>

<img name=img2...>...

</form>

document.img1

document.form1.img2

存取網頁物件的屬性

我們必須使用前一頁所述的方式來指定網頁物件，然後再用 .property 來指定物件的屬性。譬如：

document.form1.text1.value = "Hello"

把表單 form1 文字欄 text1 的 value 屬性設定成字串 "Hello" 。

navigator 物件

屬性說明appCodeName Specifies the code name of the browser

appName Specifies the name of the browser.

appVersion Specifies version information for the Navigator.

language Indicates the translation of the Navigator being used

mimeTypes An array of all MIME types supported by the client

platform Indicates the machine type for which the Navigator was compiled

plugins An array of all plug-ins currently installed on the client

userAgent Specifies the user-agent header.

Contains information about the version of Navigator in use.

方法說明javaEnabled Tests whether Java is enabled.

plugins.refresh Makes newly installed plug-ins available and optionallyreloads open documents that contain plug-ins.

preference Allows a signed script to get and set certain Navigator preferences

savePreferences Saves the Navigator preferences to the local file prefs.js.

例

<script>document.write("<P>navigator.appName = " + navigator.appName)document.write("<P>navigator.appVersion = " + navigator.appVersion)document.write("<P>navigator.CodeName = " + navigator.CodeName)document.write("<P>navigator.language = " + navigator.language)document.write("<P>navigator.platform = " + navigator.platform)document.write("<P>navigator.userAgent = " + navigator.userAgent)</script>

底下的程式碼可用來在網頁中列印 navigator 物件的屬性。下一頁顯示在 Navigator 和 IE 中執行的結果。

例



底下的程式碼用來測試瀏覽器的版本是否為 Navigator

4.x 或 IE 4.x 以上。

<html><head><meta http-equiv="Content-Type" content="text/html;charset=big5"> <title> 瀏覽器 </title><script src=bver.js></script></head><body><p> 你使用<script>if (isNav4) document.write("Netscape 4.x")else if (isIE5) document.write("MSIE 5.x")else if (isIE4) document.write("MSIE 4.x")else document.write(" 無法辦別的 ")</script>瀏覽器</body></html>

location 物件The location object represents the complete URL

associated with a given window object. Each

property of the location object represents a

different portion of the URL.

http://home.netscape.com/assist/extensions.html#topic1?x=7&y=2

URL 是由下列幾個部分所組成：protocol//host:port/pathname#hash?search

譬如：

屬性說明hash Specifies an anchor name in the URL

host Specifies the host and domain name, or IP address, of a network host.

hostname

Specifies the host:port portion of the URL.

href Specifies the entire URL.

pathname

Specifies the URL-path portion of the URL.

port Specifies the communications port that the server uses.

protocol

Specifies the beginning of the URL, including the colon

search Specifies a query.方法說明reload Forces a reload of the window’s current document

replace Loads the specified URL over the current history entry

The following two statements are equivalent and set the URL of the current window to the Netscape home page:

location.href="http://home.netscape.com/"

location="http://home.netscape.com/"

例

例底下的程式碼在網頁中顯示網頁的網址：

<p> 本頁的網址是 <script> document.write(location.href) </script>

例底下的程式碼用來更換目前的網頁：<script> location.replace("http://www.pu.edu.tw")</script>

例 JavaScript 參考手冊 p.266

<FORM NAME="catalogForm"><B>Which catalog do you want to see?</B><P><B>Season</B><BR><INPUT TYPE="radio" NAME="season" VALUE="q1" CHECKED>Spring/Summer<BR><INPUT TYPE="radio" NAME="season" VALUE="q3">Fall/Winter<P><B>Category</B><BR><INPUT TYPE="radio" NAME="category" VALUE="clo" CHECKED>Clothing<BR><INPUT TYPE="radio" NAME="category" VALUE="lin">Linens<BR><INPUT TYPE="radio" NAME="category" VALUE="hom">Home & Garden<P><INPUT TYPE="button" VALUE="Go" onClick="displayCatalog()"></FORM>

<SCRIPT>function displayCatalog() {

var seaName=""var catName=""for (var i=0; i < document.catalogForm.season.length; i++) {

if (document.catalogForm.season[i].checked) {seaName=document.catalogForm.season[i].valuei=document.catalogForm.season.length

}}for (var i in document.catalogForm.category) {

if (document.catalogForm.category[i].checked) {catName=document.catalogForm.category[i].valuei=document.catalogForm.category.length

}}fileName=seaName + catName + ".html"location.replace(fileName)

}</SCRIPT>

history 物件Contains an array of information on the URLs that the client has

visited within a window. This information is stored in a history

list and is accessible through the browser’s Go menu.

You can refer to the history entries by using the window.history

array. This array contains an entry for each history entry in

source order. Each array entry is a string containing a URL. For

example, if the history list contains three named entries, these

entries are reflected as history[0], history[1], and history[2].

屬性說明current Specifies the URL of the current history

entry

length Reflects the number of entries in the history list

next Specifies the URL of the next history entry

previous

Specifies the URL of the previous history entry

方法說明back Loads the previous URL in the history list

forward Loads the next URL in the history list

go Loads a URL from the history list

例 The following example goes to the URL the user visited three clicks ago in the current window.

history.go(-3)

例 You can define the following hyperlink to reload the current page when the user clicks it:

<A HREF=”javascript:history.go(0)”>Reload Now</A>

例 You can define the following hyperlink to go to the previous page when the user clicks it:

<A HREF=”javascript:history.back()”> 上一頁 </A>

The following button navigates to the URL that is three entries backward in thehistory list:<p><input type="button" value="Go" onClick="history.go(-3)">

例

The following button navigates to the nearest history entry that contains the string "home.netscape.com":

<P><INPUT TYPE="button" VALUE="Go"

onClick="history.go('home.netscape.com')">

例

The following code determines whether the first entry in the history array contains the string "NETSCAPE". If it does, the function myFunction is called.

if (history[0].indexOf("NETSCAPE") != -1) {

myFunction(history[0])

}

例

The following example displays the entire history list:

document.writeln("<B>history is</B> " + history)

This code displays output similar to the following:

history is

Welcome to Netscape http://home.netscape.com/

Sun Microsystems http://www.sun.com/

Royal Airways http://www.supernet.net/~dugbrown/

例

document 物件Contains information about the current document, and provides methods for displaying HTML output to the user.

屬性與方法請參見 JavaScript 參考手冊

open 方法

Opens a stream to collect the output of write or writeln methods.

open([mimeType,[replace]])語法 :

The following function calls document.open to open a streambefore issuing a write method:

function windowWriter1() {var myString = "Hello, world!"msgWindow.document.open()msgWindow.document.write("<P>" + myString)msgWindow.document.close()

}

例

close 方法

Closes an output stream and forces data sent to layout to display.

close()語法 :

The following function calls document.close to close a stream that was opened with document.open. The document.close method forces the content of the stream to display in the window.

function windowWriter1() {var myString = "Hello, world!"msgWindow.document.open()msgWindow.document.write("<P>" + myString)msgWindow.document.close()

}

例

write 方法Writes one or more HTML expressions to a document in the specified window.

document.write(expr1[, ..., exprN])語法 :

writeln 方法Writes one or more HTML expressions to a document in the specified window and follows them with a newline character.

document.writeln(expr1[, ..., exprN])語法 :

例 <table border=1 cellspcing=1 cellpadding=3 width=450><caption> 九九乘法表 </caption><script>document.write("<tr align=right>")document.write("<th width=40 align=center>*</th>")for (var i = 1; i < 10; i++)

document.write("<th width=40>" + i + "</th>")document.writeln("</tr>")for (var i = 1; i < 10; i++) {

document.write("<tr align=right>")document.write("<th width=40 align=center>" + i + "</th>")for (var j = 1; j < 10; j++)

document.write("<td width=40>" + i*j + "</td>")document.writeln("</tr>")

}</script></table>

<form>

<p> 按底下的按鈕來改變網頁底色 </p>

<p>

<input type=“button” value=“ 紅色” onClick="document.bgColor='red'">

<input type="button" value=" 綠色 " onClick="document.bgColor='green'">

<input type="button" value=" 藍色 " onClick="document.bgColor='blue'">

<input type="button" value=" 黑色 " onClick="document.bgColor='black'">

</p>

</form>

例

JavaScript Reflection & HTML Layout

參閱 JavaScript 使用者手冊 p. 176

Navigator Object Arrays

參閱 JavaScript 使用者手冊 p. 182

window 物件 open & close

open 方法Opens a new web browser window.

語法 : open(URL[, windowName[, windowFeatures]])

URL A string specifying the URL to open in the new window.

windowName A string specifying the window name to use in the TARGET attribute of a FORM or A tag. windowName can contain only alphanumeric or underscore (_) characters.

windowFeatures A string containing a comma-separated list determining whether or not to create various standard window features.

alertDisplays an Alert dialog box with a message and an OK button.

語法 : alert (message)

例alert(" 這是限制級網站，未成年的訪客請離開 ")

confirmDisplays a Confirm dialog box with the specified message and OK and Cancel buttons.

語法 : confirm (message)

例confirm(" 你滿 18 歲了嗎？ ")

<html><head><meta http-equiv="Content-Type“ content="text/html; charset=big5"><title> 禁忌話題 </title><script>function verify_visitor (){

if (confirm(" 你滿 18 歲了嗎？ "))location.href = "http://sex.pu.edu.tw"

elselocation.href = "http://www.disneyland.com"

}</script></head><body onLoad="verify_visitor()"></body></html>

例

defaultStatusThe default message displayed in the status bar at the bottom of the window.

<body onLoad="defaultStatus=' 歡迎光臨一休客棧 '">

例以下的設定使得網頁下載後，在狀態欄中顯示歡迎的訊息：

在 onMouseOut 和 onMouseOver 事件處理程序中設定 defaultStatus 屬性時，最後必須加上 return true 敘述。

例

<A HREF="http://home.netscape.com"onMouseOver = "defaultStatus=' 回到網景首頁 '; return true">

Netscape</A>

statusSpecifies a priority or transient message in the status bar at the bottom of the window, such as the message that appears when a mouseOver event occurs over an anchor.

<body onLoad="defaultStatus=' 歡迎光臨一休客棧 '">

例以下的設定使得網頁下載後，在狀態欄中顯示歡迎的訊息：

在 onMouseOut 和 onMouseOver 事件處理程序中設定 defaultStatus 屬性時，最後必須加上 return true 敘述。

例

<A HREF="http://home.netscape.com"onMouseOver = "defaultStatus=' 回到網景首頁 '; return true">

Netscape</A>

setTimeoutEvaluates an expression or calls a function once after a specified number of milliseconds elapses.

語法 : setTimeout(expression, msec)

setTimeout(function, msec[, arg1[, ..., argN]])

參閱參考手冊 p.547

clearTimeoutCancels a timeout that was set with the setTimeout method.

語法 : clearTimeout(timeoutID)

Cookies

Cookies are a mechanism for storing persistent data on the client in a file called cookies.txt. Because HyperText Transport Protocol (HTTP) is a stateless protocol, cookies provide a way to maintain information between client requests.

Each cookie is a small item of information with an optional expiration date and is added to the cookie file in the following format:

name=value;expires=expDate;

name is the name of the datum being stored, and value is its value. If name and value contain any semicolon, comma, or blank (space) characters, you must use the escape function to encode them and the unescape function to decode them.

expDate is the expiration date, in GMT date format:

Wdy, DD-Mon-YY HH:MM:SS GMT

For example, a valid cookie expiration date is

expires=Wednesday, 09-Nov-99 23:12:40 GMT

Although it’s slightly different from this format, the date string returned by the Date method toGMTString can be used to set cookie expiration dates.

The expiration date is an optional parameter indicating how long to maintain the cookie. If expDate is not specified, the cookie expires when the user exits the current Navigator session. Navigator maintains and retrieves a cookie only if its expiration date has not yet passed.

設定 cookies

// Sets cookie values. Expiration date is optional

//

function setCookie(name, value, expire)

{

document.cookie = name + "=" + escape(value)

+ ((expire == null) ? "" : ("; expires=" + expire.toGMTString()))

}

取得 cookies 資訊function getCookie(Name) {

var search = Name + "="if (document.cookie.length > 0) { // if there are any cookies

offset = document.cookie.indexOf(search)if (offset != -1) { // if cookie exists

offset += search.length// set index of beginning of valueend = document.cookie.indexOf(";", offset)// set index of end of cookie valueif (end == -1)

end = document.cookie.lengthreturn unescape(document.cookie.substring(offset, end))

}}

}

刪除 cookies

function deleteCookie(name)

{

var expdate = new Date();

// Delete the named cookie.

expdate.setTime(expdate.getTime() - (86400 * 1000 * 1));

setCookie(name, "", expdate);

}

Documents

瀏覽器物件 靜宜大學 資管系 蔡奇偉 副教授. Netscape 瀏覽器物件 ( 類型 ) 的階層 圖中有 符號的為網頁中 的單一物件。 階層中的子物件是父物件

瀏覽器物件靜宜大學資管系蔡奇偉副教授. Netscape 瀏覽器物件 ( 類型 ) 的階層圖中有符號的為網頁中的單一物件。階層中的子物件是父物件