除了存取 DOM 物件的性質外,我們也可以執行各個物件所提供的方法。欲執行物件的方法,可直接將輸入引數放在方法之後的括弧內,其格式如下:
objectName.methodName([arguments]);
首先我們看看 window 下的 history 物件極其相關方法,此物件的功能是用來記錄網頁瀏覽的歷史紀錄,請見下列範例:
上述範例的原始檔如下:
在上述範例中,history.length 記錄了以前瀏覽網頁的頁數,我們可以先點選「清華大學資訊系」,再按「上一頁」的瀏覽器按鈕,就可以看到「History 長度」已經變成 2。我們也可以呼叫 history.go(n) 來跳到之前瀏覽過的網頁,當 n=-1 時,代表跳到前一個網頁,當 n=+1 時,代表跳到下一個網頁,而當 n=0,則代表重新整理此網頁。
另一個常用的方法是 window 物件的 open() 方法,可以用來開啟瀏覽器新視窗,並指定視窗的各種屬性
,此方法的格式如下:
windowId = window.open([url][, winName][, winControlString][, keepHistory]);
說明如下:
- url:新視窗所要顯示的檔案或網址。
- winName:新視窗的名稱
- winControlString:設定新視窗選項的字串,例如寬度、高度、位置、是否顯示狀態列等。
- keepHistory:是否保留 History 資料。
此方法的使用可見下列範例:
在上述範例中,只要你點選任一個連結,JavaScript 就會使用 window.open() 來開啟一個新視窗來顯示此連結。上述範例的原始檔如下:
在上述範例中,比較需要注意的一列是「href="#"」,這是一個「虛擬」的連結,當使用者點選此連結時,瀏覽器並不會嘗試去載入一個新網頁,而是經由 onClick 事件去驅動 JavaScript 的程式碼來開啟一個新視窗。
我們可以使用 window.open() 的第三個輸入參數來控制新視窗的選項,請見下列範例,此範例可以讓使用者經由表單的選項來控制新視窗的設定:
上述範例的原始檔如下:
在上述範例中,當使用者按下「開啟新視窗」時,會將控制視窗選項的字串顯示在狀態列,以方便查看。
我們也可以使用 window 物件的 print() 方法來印出一個網頁,例如:
在上述範例中,只要你點選任一個連結,JavaScript 就會使用 window.print() 來開啟一個列印的對話視窗。此範例的原始檔如下:
請特別注意,我們用了兩個不同的方式來達到同樣的功能。
此外,我們可以使用 window.moveBy(x, y) 來將視窗相對於目前的位置移動 x 和 y 個像素,例如我們可以移動視窗以產生「地震」的效果,範例如下:
上述範例的原始檔如下:
在上述範例中,只要按下任一個按鈕,瀏覽器就會呼叫 window.moveBy,讓視窗上下左右移位,產生彷如地震的感覺。
我們可以使用 window.clipboardData.setData() 來將某段文字送到剪貼簿,請見下列範例:
上述範例的原始檔如下:
在上述範例中,我們只要在情詩上面點兩下,就會將 pre 標籤所夾的文字送到剪貼簿,其中
- ondblclick 是「on double click」的簡稱,代表滑鼠點選兩下後,所需執行的 JavaScript 程式。
- window.clipboardData.setData() 可以將某段文字拷貝到剪貼簿。
- this.innerText 就是目前標籤(此例是 pre 標籤)內所夾的文字。
對於 window 和 document 物件的性質、方法、事件、集合,本書的範例光碟也有完整的列表,由於篇幅有限,不再贅述,請見下列檔案:
JavaScript 程式設計與應用:用於網頁用戶端