6-2 DOM k

除了存取 DOM 物件的性質外,我們也可以執行各個物件所提供的方法。欲執行物件的方法,可直接將輸入引數放在方法之後的括弧內,其格式如下:
objectName.methodName([arguments]);
首先我們看看 window 下的 history 物件極其相關方法,此物件的功能是用來記錄網頁瀏覽的歷史紀錄,請見下列範例:

Example(histGo01.htm):

上述範例的原始檔如下:

原始檔(histGo01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>"history" 的幾個方法</h2>
<hr>
<a href="http://www.cs.nthu.edu.tw">清華大學資訊系</a><br>
<hr>

History 長度 = <script>document.writeln(history.length)</script>[使用 history.length]<br>
<a href="javascript:history.go(-1)">回前一頁</a> [使用 history.go(-1)]<br>
<a href="javascript:history.go(0)">重新整理</a> [使用 history.go(0)]<br>
<a href="javascript:history.go(+1)">跳下一頁</a> [使用 history.go(+1)]
<hr>

</body>
</html>

在上述範例中,history.length 記錄了以前瀏覽網頁的頁數,我們可以先點選「清華大學資訊系」,再按「上一頁」的瀏覽器按鈕,就可以看到「History 長度」已經變成 2。我們也可以呼叫 history.go(n) 來跳到之前瀏覽過的網頁,當 n=-1 時,代表跳到前一個網頁,當 n=+1 時,代表跳到下一個網頁,而當 n=0,則代表重新整理此網頁。

Hint
你可以直接使用 history 物件,而不必使用全名 window.history。

另一個常用的方法是 window 物件的 open() 方法,可以用來開啟瀏覽器新視窗,並指定視窗的各種屬性 ,此方法的格式如下:

windowId = window.open([url][, winName][, winControlString][, keepHistory]); 說明如下: 此方法的使用可見下列範例:

Example(winOpen01.htm):

在上述範例中,只要你點選任一個連結,JavaScript 就會使用 window.open() 來開啟一個新視窗來顯示此連結。上述範例的原始檔如下:

原始檔(winOpen01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用 window.open() 的範例</h2>
<hr>
<script>
function openWin(url){
	window.open(url,'Detail','status=no,toolbar=no,width=800,height=600');
}
</script>
<a href="#" onClick="openWin('http://www.nthu.edu.tw')">清大首頁</a><br>
<a href="#" onClick="openWin('http://www.nctu.edu.tw')">交大首頁</a><br>
<a href="#" onClick="openWin('http://www.ntu.edu.tw')">台大首頁</a><br>
<hr>

</body>
</html>

在上述範例中,比較需要注意的一列是「href="#"」,這是一個「虛擬」的連結,當使用者點選此連結時,瀏覽器並不會嘗試去載入一個新網頁,而是經由 onClick 事件去驅動 JavaScript 的程式碼來開啟一個新視窗。

Hint
使用 HTML 所產生的連結,也可以產生新視窗,只要加入 target=_blank 的屬性就可以了,例如「<a target=_blank href=連結網址>連結文字</a>」,但是此方法並無法指定新視窗的各種屬性。

我們可以使用 window.open() 的第三個輸入參數來控制新視窗的選項,請見下列範例,此範例可以讓使用者經由表單的選項來控制新視窗的設定:

Example(winOpen02.htm):

上述範例的原始檔如下:

原始檔(winOpen02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用 window.open() 的範例:控制新視窗的選項</h2>
<hr>
<script>
function openWindow(form){
	var winFmt="";
	winFmt += "width="+form.width.value+",";
	winFmt += "height="+form.height.value+",";
	winFmt += "left="+form.left.value+",";
	winFmt += "top="+form.top.value+",";
	winFmt += "titlebar="+(form.titlebar.status?1:0)+",";
	winFmt += "menubar="+(form.menubar.status?1:0)+",";
	winFmt += "toolbar="+(form.toolbar.status?1:0)+",";
	winFmt += "location="+(form.location.status?1:0)+",";
	winFmt += "scrollbars="+(form.scrollbars.status?1:0)+",";
	winFmt += "resizable="+(form.resizable.status?1:0)+",";
	winFmt += "status="+(form.status.status?1:0);
	status="控制字串 = " + winFmt;
	window.open(form.url.value, form.title.value, winFmt);
}
</script>

<form>
視窗網址:<input size=30 id=url value="http://www.cs.nthu.edu.tw"><br>
視窗名稱:<input size=30 id=title value="newWin"><br>
視窗寬度:<input size=30 id=width value=400><br>
視窗高度:<input size=30 id=height value=300><br>
水平位置:<input size=30 id=left value=100><br>
垂直位置:<input size=30 id=top value=100><br>
<input type=checkbox id=titlebar> 顯示標題列<br>
<input type=checkbox id=menubar> 顯示下拉選單<br>
<input type=checkbox id=toolbar> 顯示工具列<br>
<input type=checkbox id=location> 顯示網址列<br>
<input type=checkbox id=scrollbars> 顯示捲軸<br>
<input type=checkbox id=resizable> 可變大小<br>
<input type=checkbox id=status> 顯示狀態列<br>
<p>
<input type=button value="開啟新視窗" onClick="openWindow(this.form)">
<input type=reset>
<hr>

</body>
</html>

在上述範例中,當使用者按下「開啟新視窗」時,會將控制視窗選項的字串顯示在狀態列,以方便查看。

我們也可以使用 window 物件的 print() 方法來印出一個網頁,例如:

Example(winPrint01.htm):

在上述範例中,只要你點選任一個連結,JavaScript 就會使用 window.print() 來開啟一個列印的對話視窗。此範例的原始檔如下:

原始檔(winPrint01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用 window.print() 的範例</h2>
<hr>
方法一:<a href="#" onClick="window.print()">列印此網頁</a><br>
方法二:<a href="javascript:window.print()">列印此網頁</a>
<hr>

</body>
</html>

請特別注意,我們用了兩個不同的方式來達到同樣的功能。

此外,我們可以使用 window.moveBy(x, y) 來將視窗相對於目前的位置移動 x 和 y 個像素,例如我們可以移動視窗以產生「地震」的效果,範例如下:

Example(winQuake01.htm):

上述範例的原始檔如下:

原始檔(winQuake01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>地震</h2>
<hr>

<script>
function shakeWindow(x){
	for (i=0; i<1000; i++){
		window.moveBy(0,x)
		window.moveBy(x,0)
		window.moveBy(0,-x)
		window.moveBy(-x,0)
	}
}
</script>

<form>
<input type="button" onClick="shakeWindow(5)" value="小地震">
<input type="button" onClick="shakeWindow(50)" value="大地震">
</form>

<hr>
</body>
</html>

在上述範例中,只要按下任一個按鈕,瀏覽器就會呼叫 window.moveBy,讓視窗上下左右移位,產生彷如地震的感覺。

我們可以使用 window.clipboardData.setData() 來將某段文字送到剪貼簿,請見下列範例:

Example(winClipboard01.htm):

上述範例的原始檔如下:

原始檔(winClipboard01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>複製文字</h2>
<hr>
請在下列文章點兩下:
<pre style="background-color:#EEEEEE;" ondblclick='javascript:window.clipboardData.setData("Text", this.innerText); alert("你已經拷貝了蔣勳老師的情詩...");'>
我願是滿山的杜鵑 
只為一次無憾的春天 
我願是繁星
捨給一個夏天的夜晚
我願是千萬條江河 
流向唯一的海洋 
我願是那月 
為你,再一次圓滿 
...
</pre>

<hr>
</body>
</html>

在上述範例中,我們只要在情詩上面點兩下,就會將 pre 標籤所夾的文字送到剪貼簿,其中

對於 window 和 document 物件的性質、方法、事件、集合,本書的範例光碟也有完整的列表,由於篇幅有限,不再贅述,請見下列檔案:
JavaScript 程式設計與應用:用於網頁用戶端