JavaScript 客戶端JavaScript之 腳本化瀏覽器窗口

一、計時器

客戶端Javascript以全局函數setTimeOut()、clearTimeOut()、setInterval()、clearInterval()提供這一功能。

 

前者是從運行的那一時刻開始，等待多少毫秒之後，執行指定的函數

後者是從運行的那一時刻開始，每隔多少毫秒，執行指定的函數

至關於，一個是單次，一個是循環

clearTimeOut()用來取消規劃的函數的執行

clearInterval()是用來取消規劃的函數的任何將來調用

代碼：

 1  <form name="form1">
 2         <input type="button" name="fbtn" value="時間顯示" id="bt1" />
 3     </form>
 4 window.onload = function () {
 5     setInterval(function () {
 6         var t = new Date();
 7  
 8         document.getElementById("bt1").innerText = t.getFullYear() + "-" + t.getMonth() + "-" + t.getDay() + " " + t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds();
 9     }, 1000)
10 }

 

二、瀏覽器Location和History

Location 對象包含有關當前 顯示的文檔的URL 的信息。

Location 對象是 Window 對象的一個部分，可經過 window.location 屬性來訪問。

Location 對象屬性

屬性	描述
hash	設置或返回從井號 (#) 開始的 URL（錨）。
host	設置或返回主機名和當前 URL 的端口號。
hostname	設置或返回當前 URL 的主機名。
href	設置或返回完整的 URL。
pathname	設置或返回當前 URL 的路徑部分。
port	設置或返回當前 URL 的端口號。
protocol	設置或返回當前 URL 的協議。
search	設置或返回從問號 (?) 開始的 URL（查詢部分）。

Location 對象方法

屬性	描述
assign()	加載新的文檔。
reload()	從新加載當前文檔。
replace()	用新的文檔替換當前文檔。

載入新的文檔

location=新的URL

或者使用 reload()和replace()方法 

 

注：window.location與Document.location並不相同，

後者只是一個字符串，大多數狀況下 document.location=window.location.href

但存在服務器重寫向時，document.location包含的已是裝載的URL，而window.location.href包含的

則是原始請求的URL

History 對象

History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

History 對象是 window 對象的一部分，可經過 window.history 屬性對其進行訪問。

註釋：沒有應用於 History 對象的公開標準，不過全部瀏覽器都支持該對象。

History 對象屬性

屬性	描述
length	返回瀏覽器歷史列表中的 URL 數量。

History 對象方法

方法	描述
back()	加載 history 列表中的前一個 URL。
forward()	加載 history 列表中的下一個 URL。
go()	加載 history 列表中的某個具體頁面。

History 對象描述

History 對象最初設計來表示窗口的瀏覽歷史。但出於隱私方面的緣由，History 對象再也不容許腳本訪問已經訪問過的實際 URL。惟一保持使用的功能只有 back()、forward() 和 go() 方法。

 

三、獲取窗口、屏幕和瀏覽器信息

 

3.1 窗口的幾何大小

有幾種不一樣的座標系統

屏幕座標描述的是桌面上一個瀏覽器窗口的位置，它們相對於桌面的左上角來度量。

。

窗口座標描述的是在web瀏覽器中的視口的位置，相對於視口的左上角。

 

文檔座標描述的是一個HTML文檔中的位置，相對於文檔的左上角。

Window 對象屬性

屬性	描述
closed	返回窗口是否已被關閉。
defaultStatus	設置或返回窗口狀態欄中的默認文本。
document	對 Document 對象的只讀引用。請參閱 Document 對象。
history	對 History 對象的只讀引用。請參數 History 對象。
innerheight	返回窗口的文檔顯示區的高度。
innerwidth	返回窗口的文檔顯示區的寬度。
length	設置或返回窗口中的框架數量。
location	用於窗口或框架的 Location 對象。請參閱 Location 對象。
name	設置或返回窗口的名稱。
Navigator	對 Navigator 對象的只讀引用。請參數 Navigator 對象。
opener	返回對建立此窗口的窗口的引用。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部寬度。
pageXOffset	設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。
pageYOffset	設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。
parent	返回父窗口。
Screen	對 Screen 對象的只讀引用。請參數 Screen 對象。
self	返回對當前窗口的引用。等價於 Window 屬性。
status	設置窗口狀態欄的文本。
top	返回最頂層的先輩窗口。
window	window 屬性等價於 self 屬性，它包含了對窗口自身的引用。
screenLeft screenTop screenX screenY	只讀整數。聲明瞭窗口的左上角在屏幕上的的 x 座標和 y 座標。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

Window 對象方法

方法	描述
alert()	顯示帶有一段消息和一個確認按鈕的警告框。
blur()	把鍵盤焦點從頂層窗口移開。
clearInterval()	取消由 setInterval() 設置的 timeout。
clearTimeout()	取消由 setTimeout() 方法設置的 timeout。
close()	關閉瀏覽器窗口。
confirm()	顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
createPopup()	建立一個 pop-up 窗口。
focus()	把鍵盤焦點給予一個窗口。
moveBy()	可相對窗口的當前座標把它移動指定的像素。
moveTo()	把窗口的左上角移動到一個指定的座標。
open()	打開一個新的瀏覽器窗口或查找一個已命名的窗口。
print()	打印當前窗口的內容。
prompt()	顯示可提示用戶輸入的對話框。
resizeBy()	按照指定的像素調整窗口的大小。
resizeTo()	把窗口的大小調整到指定的寬度和高度。
scrollBy()	按照指定的像素值來滾動內容。
scrollTo()	把內容滾動到指定的座標。
setInterval()	按照指定的週期（以毫秒計）來調用函數或計算表達式。
setTimeout()	在指定的毫秒數後調用函數或計算表達式。

 

 

3.2 Screen對象

提供有關用戶顯示器的大小和可用的顏色數量的信息

屬性width和height是以像素爲單位的顯示器大小。

creen 對象包含有關客戶端顯示屏幕的信息。

註釋：沒有應用於 screen 對象的公開標準，不過全部瀏覽器都支持該對象。

Screen 對象屬性

屬性	描述
availHeight	返回顯示屏幕的高度 (除 Windows 任務欄以外)。
availWidth	返回顯示屏幕的寬度 (除 Windows 任務欄以外)。
bufferDepth	設置或返回調色板的比特深度。
colorDepth	返回目標設備或緩衝器上的調色板的比特深度。
deviceXDPI	返回顯示屏幕的每英寸水平點數。
deviceYDPI	返回顯示屏幕的每英寸垂直點數。
fontSmoothingEnabled	返回用戶是否在顯示控制面板中啓用了字體平滑。
height	返回顯示屏幕的高度。
logicalXDPI	返回顯示屏幕每英寸的水平方向的常規點數。
logicalYDPI	返回顯示屏幕每英寸的垂直方向的常規點數。
pixelDepth	返回顯示屏幕的顏色分辨率（比特每像素）。
updateInterval	設置或返回屏幕的刷新率。
width	返回顯示器屏幕的寬度。

 

3.3 Navigator對象

 

Navigator 對象

Navigator 對象包含有關瀏覽器的信息。

註釋：沒有應用於 navigator 對象的公開標準，不過全部瀏覽器都支持該對象。

Navigator 對象集合

集合	描述
plugins[]	返回對文檔中全部嵌入式對象的引用。 該集合是一個 Plugin 對象的數組，其中的元素表明瀏覽器已經安裝的插件。Plug-in 對象提供的是有關插件的信息，其中包括它所支持的 MIME 類型的列表。 雖然 plugins[] 數組是由 IE 4 定義的，可是在 IE 4 中它卻老是空的，由於 IE 4 不支持插件和 Plugin 對象。

Navigator 對象屬性

屬性	描述
appCodeName	返回瀏覽器的代碼名。
appMinorVersion	返回瀏覽器的次級版本。
appName	返回瀏覽器的名稱。
appVersion	返回瀏覽器的平臺和版本信息。
browserLanguage	返回當前瀏覽器的語言。
cookieEnabled	返回指明瀏覽器中是否啓用 cookie 的布爾值。
cpuClass	返回瀏覽器系統的 CPU 等級。
onLine	返回指明系統是否處於脫機模式的布爾值。
platform	返回運行瀏覽器的操做系統平臺。
systemLanguage	返回 OS 使用的默認語言。
userAgent	返回由客戶機發送服務器的 user-agent 頭部的值。
userLanguage	返回 OS 的天然語言設置。

Navigator 對象方法

方法	描述
javaEnabled()	規定瀏覽器是否啓用 Java。
taintEnabled()	規定瀏覽器是否啓用數據污點 (data tainting)。

 

 

 

大多數現代瀏覽器支持一種有用的滾動方法

這就是任意的HTML元素上調用scrollIntoView()方法，

固然focus()也是如此，還可利用錨 <a href="#tab2"/>

window.location.hash="#tab2"

window.location.replace("#tab2")  相比上面一種，不會產生新的歷史項

來使元素在視口可見

 

 

腳本化狀態欄

設置window.status的值

window.defaultstatus

 

錯誤處理

window.onerror=function(){}

若是給這個屬性賦一個函數，那麼只要這個窗口發生了JavaScript錯誤，這函數就會被調用。

傳遞給錯誤處理函數程序有三個：

一、錯誤信息

二、發生錯誤的js所在的文檔的URL

三、文檔中發生錯誤的行代碼

 

 

多窗口和多幀

 

一、幀之間的關係

window.opener屬性，打開建立此窗口的原始窗口。

 

一個窗口中的任何幀均可以使用window對象的屬性 frames parent和top屬性來引用其餘的幀。

 

窗口和幀的名字

窗口的名字open時由第二個參數決定，

幀的名字由name屬性指定

 

指定名字的一個重要緣由是那個名字能夠用做標記<a> 或 <form>的屬性target 的值，這樣就能夠告訴瀏覽器把激活

連接或者提交表彰的結果顯示在那裏。

給幀命名能夠惟一肯定一個幀，

如<frame name="table_of_contents" src="toc.html"></frame>

 

這樣就能夠從這個幀的兄弟幀中引用它

parent.table_of_contents

比如下訪問方式更可靠 

parent.frames[1]

 

14.8.3交互窗口中的JavaScript

 

每一個幀都是一個獨立的JavaScript執行環境。

雖然不一樣幀中的JavaScript代碼是在不一樣的做用域中執行的，可是這並不妨礙一個幀中的代碼引用

並使用另外一個幀中的代碼定義的變量的函數。

經過使用frames parent top來引用 

注：由於是詞法做用域，因此函數在定義它的做用域中執行，而不是在調用它的做用域中執行。