瀏覽器對象層次及其主要作用

 使用瀏覽器的內部對象系統, 可實現與HTML文檔進行交互。它的作用是將相關元素組織包裝起來,提供給程序設計人員使用,從而減輕編程人的勞動,提高設計Web頁面的能力。

一、瀏覽器對象層次及其主要作用

除了前面提到過的文檔document對象外,Navigator瀏覽器中還提供了窗口(Window)對象以及歷史(History)和位置(Location)對象。

●瀏覽器對象(Navigator)提供有關瀏覽器的信息

   navigator中有用的屬性包括:
※appName:提供字符串形式的瀏覽器名稱。
※appVersion:反映瀏覽器的版本號。
※appCodeName:瀏覽器的代碼名稱。
※userAgent:用戶代理標識。
※mineTypes:可以使用的mine類型信息。
※plugins:可以使用的插件信息。
※languages:語言設定。
※platform:瀏覽器適用的平臺名稱。
  示例:你所使用的瀏覽器爲:Microsoft Internet Explorer版本爲:4.0 (compatible; MSIE 6.0; Windows NT 5.0)
<script>
document.write("你所使用的瀏覽器爲:"+navigator.appName);
document.write("版本爲:"+navigator.appVersion);
</script>
●窗口對象(Windows)

Window對象有以下方法:
※open(url,WindowName,parameterlist):創建一個新窗口。
※close():關閉一個窗口。
※alert(text):警告窗口。
※confirm(text):彈出確認域。
※promt(text,Defaulttext):彈出提示框。
※setTimeout(表達式,時間)定時設置。
※clearTimeout(timer):取消以前的設定。
※setInterval(表達式,時間):設定一個時間間隔。
※clearInterval(timer):取消時間間隔設定。
※moveBy(水平位移,垂直位移):將窗口移至指定的位移。
※moveTo(x,y):將窗口移動到指定的座標。
※resizeBy(水平位移,垂直位移):按給定的位移量重新設定窗口大小。
※resizeTo(x,y):將窗口設定爲指定大小。
※scrollBy(水平位移,垂直位移):按給定的位移量滾動窗口。
※scrollTo(x,y):將窗口滾動到指定位置。
※find(["string",true|false][,true|false]):查找網頁中的字符串。
※back():後退。
※forward():前進。
※home():返回主頁。
※stop():停止裝載網頁。
※print():打印網頁。
※frame:幀。
※status:狀態欄信息。
※location:當前窗口URL信息。
※history:歷史。
※closed:窗口是否已關閉的邏輯值。
※Parent 指明當前窗口或幀的父窗口。
※defaultstatus:默認狀態,它的值顯示在窗口的狀態欄中。
※top:包括的是用以實現所有的下級窗口的窗口。
※window.指的是當前窗口
※self:引用當前窗口。

 

  打開一個窗口的基本格式:

Window .open("URL","窗口名字","窗口屬性"]

window屬性參數是由一個字符串列表項它由逗號分隔,它指明瞭有關新創建窗口的屬性。

參 數 設定值 含 義
toolbar yes/no 建立或不建立標準工具條
location yes/no 建立或不建立位置輸入字段
directions yes/no 建立或不建立標準目錄按鈕
status yes/no 建立或不建立狀態條
menubar yes/no 建立或不建立菜單條
scrollbar yes/no 建立或不建立滾動條
revisable yes/no 能否改變窗口大小
width yes/no 確定窗口的寬度
Height yes/no 確定窗口的高度。

在使用Open()方法時,需要注意以下點。

·通常瀏覽器窗中,總有一個文檔是打開的。因而不需要爲輸出建立一個新文檔。

·在完成對Web文檔的寫操作後,要使用或調用close()方法來實現對輸出流的關閉。

·在使用open()來打開一個新流時,可爲文檔指定一個有效的文檔類型,有效文檔類型包括text/HTML、text/gif、text/xim、text/plugin等。

    Window對象處於對象層次的最頂端,它提供了處理Navigator窗口的方法和屬性。
●位置對象(Location)
Location對象提供了與當前打開的URL一起工作的方法和屬性,它是一個靜態的對象。
   location對象有以下方法:
   location=url
   reload()
   replace()
●歷史對象(History)
History對象提供了與歷史清單有關的信息。
   利用history對象可以實現網頁導航:
1) go:讓瀏覽器載入指定的url.
   history.go(-2) 可以裝入瀏覽器訪問過的倒數第二個URL.
   history.go(0)   可以重新載入當前URL.
   history.go(http://www.tastelife.net)
2) back:讓瀏覽器載入歷史記錄前一個URL
3) forward:讓瀏覽器載入歷史記錄後一個URL
●文檔對象(Document)
document對象包含了與文檔元素(elements)一起工作的對象,它將這些元素封裝起來供編程人員使用。
編程人員利用這些對象,可以對WWW瀏覽器環境中的事件進行控制並作出處理。在javascript中提供了非常豐富的內部方法和屬性,從而減輕了編程人員的工作,提高編程效率。這正是基於對象與面向對象的根本區別所在。在這些對象系統中,文檔對象屬於非常重要的,它位於最低層,但對於我們實現Web頁面信息交互起作關鍵作用。因而它是對象系統的核心部分。

二、文檔對象功能及其作用

在Navigator瀏覽器中,document文檔對象是核心是,同時也是最重要的。見圖6-1所示。

Links Anchor Form Method Prop
鏈接對象 錨對象 窗體對象 方法 對象

從圖6-1中可以看出,document對象的主要作用就是把這些基本的元素(如links,anchor等)包裝起來,提供給編程人員使用。從另一個角度看,document對象中又是由屬性和方法組成。

1、document中三個主要的對象

在document中主要有:links,anchor,form等三個最重要的對象:

(1)anchor錨對象:

anchor對象指的是<A Name=...> </A>標識在HTML源碼中存在時產生的對象。它包含着文檔中所有的anchors信息。

(2)鏈接links對象

link對象指的是用<A Href=...> </A>標記的連接一個超文本或超媒體的元素作爲一個特定的URL。

(3)窗體(Form)對象

窗體對象是文檔對象的一個元素,它含有多種格式的對象儲存信息,使用它可以在javascript腳本中編寫程序進行文字輸入,並可以用來動態改變文檔的行爲。通過document. Forms[]數組來使得在同一個頁面上可以有多個相同的窗體,使用forms[]數組要比使用窗體名字要方便得多。
    document對象有以下方法:

(1)write()、writeln()輸出顯示。

該方法主要用來實現在Web頁面上顯示輸出信息。在實際使用中,需注意以下幾點:

·writeln()與write()唯一不同之處在於在未尾加了一個換符。

·爲了正常顯示其輸出信息,必須指明<pre> </Pre>標記,使之告訴編輯器。

·輸出的文檔類型,可以由瀏覽器中的有效的合法文本類型所確定。

(2)關閉文檔流close()

在實現多個文檔對象中,必須使用close()來關閉一個對象後,才能打開另一個文檔對象。

(3)清除文檔內容clear()


例:下面就是一個使用窗體數組和窗體名字的例子。該程序使得兩個窗體中的字段內容保持一致。

Test6_1.htm

<Html>
<head>
</head>
<body>
<form >
<input type=text onChange="document.my.elements[0].value=this.value;" >
</form>
<form NAME="my">
<input type=text onChange="document.forms[0].elements[0].value=this.value;">
</form>
</body>
</html>

其中用了OnChnge事件(當窗體內容改變時激發)。第一個使用窗體名字標識my,第二個使用窗體數組Forms[]。其效果是一致。

2、文檔對象中的attribute屬性

document對象中的attribute屬性,主要用於在引用Href標識時,控制着有關顏色的格式和有關文檔標題、文檔原文件的URL以及文檔最後更新的日期。這部分元素的主要含義如下:

(1)鏈接顏色:alinkcolor

這個元素主要用於,當選取一個鏈接時,鏈接對象本身的顏色就按alinkcolo r指定改變。

(2)鏈接顏色:linkcolor

當用戶使用<A Href=...> Text string </A>鏈接後,Textstring的顏色就會按Linkcolor所指定的顏色更新。

(3)瀏覽過後的顏色:VlinkColor

該屬性表示的是已被瀏覽存儲爲已瀏覽過的鏈接顏色。

(4)背景顏色:bgcolor

該元素包含文檔背景的顏色。

(5)前景顏色:Fgcolor

該元素包含HTML文檔中文本的前景顏色。

3、文檔對象的基本元素

(1)窗體屬性:

窗體屬性是與HTML文檔中<Form>...</Form>相對應的一組對象在HTML文檔所創建的窗體數,由length指定。通過document.forms.length反映該文檔中所創建的窗體數目。

(2)錨屬性:anchors

該屬性中,包含了HTML文檔的所有<A> </A>標記爲Name=...的語句標識。所有“錨”的數目保存在document.anchors.length中。

(3)鏈接屬性:links

鏈接屬性是指在文檔中<A>...</A>的由Href=...指定的數目,其鏈接數目保存在document.links.length中。

三、範例

例1:下面我們通過一個例子來說明文檔對象的綜合應用。

Test6_2.htm

<html>
<head>
</HEAD>
<BOdy>
<Form Name="mytable">

請輸入數據:

<Input Type="text" Name="text1" value="">
</Form>
<A name="Link1" href="test31.htm">鏈接到第一個文本</a><br>
<A name="Link2" href="test32.htm">鏈接到第二個文本</a><br>
<A name="Link2" href="test33.htm">鏈接到第三個文本</a><br>
<A href="#Link1">第一錨點</a>
<A href="#Link2">第二錨點</a>
<A Href="#Link3">第三錨點</a>
<BR>
<Script Language="javascript">
document.write("文檔有"+document.links.length+"個鏈接"+"<br>");
document.write("文檔有"+document.anchors.length+"個錨點"+"<br>");
document.write("文檔有"+document.forms.length+"個窗體");
</script>
</body>
</HTML>

例子2:下列程序隨機產生每日一語。

test6_3.html

<HTML>
<HEAD>
<script Language="javascript">
<!--
tips = new Array(6);
tips[0]="每日一語(1)";
tips[1]="每日一語(2)";
tips[2]="每日一語(3)";
tips[3]="每日一語(4)";
tips[4]="每日一語(5)";
tips[5]="每日一語(6)";
index = Math.floor(Math.random() * tips.length);
document.write("<FONT SIZE=8 COLOR=DARKBLUE>" + tips[index]+"</FONT>");
</Script>
</HEAD>
</BODY>

 
發佈了32 篇原創文章 · 獲贊 0 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章