JavaScript客戶端之Window對(duì)象

1. 計(jì)時(shí)器

setTimeout(fn,time);//經(jīng)過(guò) time 毫秒后調(diào)用 fn 函數(shù)
setInterval(fn,time); //經(jīng)過(guò) time 毫秒后重復(fù)調(diào)用 fn 函數(shù)
setTimeout(code,time);//經(jīng)過(guò) time 毫秒后執(zhí)行 code 代碼
setInterval(code,time); //經(jīng)過(guò) time 毫秒后重復(fù)執(zhí)行 code 代碼

• code 是另一種語(yǔ)法的應(yīng)用，是指你想要重復(fù)執(zhí)行的一段字符串構(gòu)成的代碼(使用該語(yǔ)法是不推薦的)
• 有返回值，傳遞給clearTimeout() 和 clearInterval()可以取消后續(xù)函數(shù)的調(diào)用

var timer = setInterval(fn,1000);
clearInterval(timer);

• time 為0時(shí)，指定的函數(shù)不會(huì)立刻執(zhí)行，會(huì)把它放到隊(duì)列中，等到前面處于等待狀態(tài)的事件處理程序全部執(zhí)行完成后，再立即調(diào)用它。

2. Window對(duì)象的屬性

2.1 location屬性

• Window 對(duì)象的 location 屬性：引用 Location 對(duì)象，表示該窗口中當(dāng)前顯示的文檔的 URL。

Document對(duì)象的location屬性：引用Location對(duì)象。
window.location === document.location //總是返回true

• Location 的 href 屬性返回 URL 的完整文本。
• “URL分解”屬性：Location 對(duì)象的其他屬性：protocol,host,hostname,port,pathname,search, 分別表示 URL 的各個(gè)部分
• hash 屬性返回 URL 中的片段標(biāo)識(shí)符部分；
• search 屬性返回 ? 之后的 URL ，這些屬性是可寫的，改變屬性的值會(huì)改變 URL ，重新載入文檔或者在當(dāng)前文檔中跳轉(zhuǎn)

location.search = "?page=" + (pagenum+1);//載入下一個(gè)頁(yè)面

• 使用 location 跳轉(zhuǎn)頁(yè)面：
• Location 對(duì)象的 assign() 方法可以使窗口載入并顯示指定的 URL 中的文檔
• replace() 方法會(huì)在載入新文檔之前會(huì)從瀏覽歷史中把當(dāng)前文檔刪除
• reload() 方法可以讓瀏覽器重新載入當(dāng)前文檔。
• 使瀏覽器跳轉(zhuǎn)到新頁(yè)面的直接的方法是把新的 URL 賦給 location 屬性：

location = "htttp://www.oreilly.com"; //可以使用絕對(duì)URL、相對(duì)URL，例如片段標(biāo)識(shí)符

2.2 history 屬性

• history 屬性引用 History 對(duì)象，History 對(duì)象是用來(lái)把窗口的瀏覽歷史用文檔和文檔狀態(tài)列表的形式表示。
• History 對(duì)象的 length 屬性表示瀏覽歷史列表中的元素?cái)?shù)量，出于安全因素，腳本不能訪問(wèn)已保存的 URL。
• history.back() : 在瀏覽歷史后退一格；
• history.forward(): 在瀏覽歷史前進(jìn)一格；
• history.go(num) // num：正值表示在瀏覽歷史中向前跳過(guò)任意頁(yè)，負(fù)值表示向后跳過(guò)任意頁(yè)
• 如果窗口包含多個(gè)子窗口，子窗口的瀏覽歷史會(huì)按時(shí)間順序穿插在主窗口的歷史中，這意味著例如主窗口調(diào)用 history.back() 可能會(huì)導(dǎo)致一格子窗口往回跳轉(zhuǎn)到前一個(gè)顯示的文檔，但主窗口保留當(dāng)前狀態(tài)不變。

Document對(duì)象的URL屬性：文檔首次載入保存該文檔的URL的靜態(tài)字符串。

2.3 navigator 屬性

• Window 對(duì)象的 navigator 屬性引用 Navigator 對(duì)象，包含瀏覽器廠商和版本信息
• navigator.appName //返回 web 瀏覽器的全稱
• navigator.appVersion //通常以數(shù)字開(kāi)始，并跟著包含瀏覽器廠商和版本信息的詳細(xì)字符串。
• navigator.userAgent //包含 appVersion 中的所有信息，并且常常也可能包含其他細(xì)節(jié)。
• navigator.platform //在其上運(yùn)行的瀏覽器的操作系統(tǒng)的字符串。

console.log("appName: \n" + window.navigator.appName);        // Web瀏覽器的全稱，IE為“Microsoft Internet Explorer”，其它為“Netscape”
console.log("appVersion: \n" + window.navigator.appVersion);    // 瀏覽器的版本信息
console.log("userAgent: \n" + window.navigator.userAgent);        // 瀏覽器的版本信息（可能比appVersion更詳細(xì)）
console.log("platform: \n" + window.navigator.platform);        // 瀏覽器的運(yùn)行操作系統(tǒng)

2.4 screen 屬性

• Window 對(duì)象的 screen 屬性引用 Screen 對(duì)象，提供有關(guān)窗口顯示的大小和可用的顏色數(shù)量的信息。
• 屬性 width 和 height 指定的是以像素為單位的窗口的大小。
• 屬性 availWidth 和 availHeight 指定的是實(shí)際可用的顯示大小，排除了想桌面任務(wù)欄這樣的特性所占用的空間。
• 屬性 colorDepth 指定的是顯示的BPP（bits-per-pixel）值，典型的值有16,24,32

console.log("width: " + window.screen.width);        // 屏幕寬度
console.log("height: " + window.screen.height);        // 屏幕高度
console.log("availWidth: " + window.screen.availWidth);        // 屏幕可用寬度
console.log("availHeight: " + window.screen.availHeight);    // 屏幕可用高度

3. 對(duì)話框

• alert("msg") 顯示一條消息，等待用戶關(guān)閉
• confirm("msg") 顯示一條消息，等待用戶按確定（返回 true）或取消（返回 false）
• prompt("msg") 顯示一條消息，等待用戶輸入字符串，并返回字符串的值
• 這些對(duì)話框一般會(huì)產(chǎn)生阻塞，代碼停止運(yùn)行，正在載入的文檔會(huì)停止載入，直到用戶按要求響應(yīng)為止。會(huì)破壞用戶的瀏覽體驗(yàn)，所以良好的設(shè)計(jì)要有節(jié)制地使用這些對(duì)話框。對(duì)話框常用于調(diào)試。

4. 多窗口和窗體

• 打開(kāi)窗口：

var w = window.open(url,參數(shù)2,參數(shù)3,參數(shù)4);

• url：要在新窗口顯示的文檔的 URL ，如果省略，會(huì)打開(kāi)一個(gè)空白的新窗口

• 參數(shù)2：新窗口的名字

• 參數(shù)3：一個(gè)以逗號(hào)分隔的列表，包含大小和各種屬性

• 參數(shù)4：布爾值，true：新窗口替換掉窗口瀏覽歷史的當(dāng)前條目，false：在窗口瀏覽歷史中創(chuàng)建一個(gè)新的條目（默認(rèn)）

• 關(guān)閉窗口：w.close();

已關(guān)閉的窗口，代表它的 Window 對(duì)象仍然存在，w.closed 屬性為 true，它的 document 為 null

• w.opener 屬性引用的是打開(kāi)它的腳本的 Window 對(duì)象

w.open().opener === w;

• 窗體是通過(guò)<iframe>元素創(chuàng)建的