JavaScript客戶端之Window對象
1. 計時器
setTimeout(fn,time);//經過 time 毫秒后調用 fn 函數
setInterval(fn,time); //經過 time 毫秒后重復調用 fn 函數
setTimeout(code,time);//經過 time 毫秒后執行 code 代碼
setInterval(code,time); //經過 time 毫秒后重復執行 code 代碼
- code 是另一種語法的應用，是指你想要重復執行的一段字符串構成的代碼(使用該語法是不推薦的)
- 有返回值，傳遞給clearTimeout() 和 clearInterval()可以取消后續函數的調用
var timer = setInterval(fn,1000);
clearInterval(timer);
-
time為0時，指定的函數不會立刻執行，會把它放到隊列中，等到前面處于等待狀態的事件處理程序全部執行完成后，再立即調用它。
2. Window對象的屬性
2.1 location屬性
-
Window對象的location屬性：引用Location對象，表示該窗口中當前顯示的文檔的URL。
Document對象的location屬性：引用Location對象。
window.location === document.location //總是返回true
-
Location的href屬性返回URL的完整文本。 - “URL分解”屬性：
Location對象的其他屬性：protocol,host,hostname,port,pathname,search,分別表示URL的各個部分 -
hash屬性返回URL中的片段標識符部分； -
search屬性返回?之后的URL，這些屬性是可寫的，改變屬性的值會改變URL，重新載入文檔或者在當前文檔中跳轉
location.search = "?page=" + (pagenum+1);//載入下一個頁面
- 使用
location跳轉頁面： -
Location對象的assign()方法可以使窗口載入并顯示指定的URL中的文檔 -
replace()方法會在載入新文檔之前會從瀏覽歷史中把當前文檔刪除 -
reload()方法可以讓瀏覽器重新載入當前文檔。 - 使瀏覽器跳轉到新頁面的直接的方法是把新的
URL賦給location屬性：
location = "htttp://www.oreilly.com"; //可以使用絕對URL、相對URL，例如片段標識符
2.2 history 屬性
-
history屬性引用History對象，History對象是用來把窗口的瀏覽歷史用文檔和文檔狀態列表的形式表示。 -
History對象的length屬性表示瀏覽歷史列表中的元素數量，出于安全因素，腳本不能訪問已保存的URL。 -
history.back(): 在瀏覽歷史后退一格； -
history.forward(): 在瀏覽歷史前進一格； -
history.go(num)//num：正值表示在瀏覽歷史中向前跳過任意頁，負值表示向后跳過任意頁 - 如果窗口包含多個子窗口，子窗口的瀏覽歷史會按時間順序穿插在主窗口的歷史中，這意味著例如主窗口調用
history.back()可能會導致一格子窗口往回跳轉到前一個顯示的文檔，但主窗口保留當前狀態不變。
Document對象的URL屬性：文檔首次載入保存該文檔的URL的靜態字符串。
2.3 navigator 屬性
-
Window對象的navigator屬性引用Navigator對象，包含瀏覽器廠商和版本信息 -
navigator.appName//返回 web 瀏覽器的全稱 -
navigator.appVersion//通常以數字開始，并跟著包含瀏覽器廠商和版本信息的詳細字符串。 -
navigator.userAgent//包含appVersion中的所有信息，并且常常也可能包含其他細節。 -
navigator.platform//在其上運行的瀏覽器的操作系統的字符串。
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更詳細）
console.log("platform: \n" + window.navigator.platform); // 瀏覽器的運行操作系統
2.4 screen 屬性
-
Window對象的screen屬性引用Screen對象，提供有關窗口顯示的大小和可用的顏色數量的信息。 - 屬性
width和height指定的是以像素為單位的窗口的大小。 - 屬性
availWidth和availHeight指定的是實際可用的顯示大小，排除了想桌面任務欄這樣的特性所占用的空間。 - 屬性
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. 對話框
-
alert("msg")顯示一條消息，等待用戶關閉 -
confirm("msg")顯示一條消息，等待用戶按確定（返回true）或取消（返回false） -
prompt("msg")顯示一條消息，等待用戶輸入字符串，并返回字符串的值 - 這些對話框一般會產生阻塞，代碼停止運行，正在載入的文檔會停止載入，直到用戶按要求響應為止。會破壞用戶的瀏覽體驗，所以良好的設計要有節制地使用這些對話框。對話框常用于調試。
4. 多窗口和窗體
- 打開窗口：
var w = window.open(url,參數2,參數3,參數4);
url：要在新窗口顯示的文檔的
URL，如果省略，會打開一個空白的新窗口參數2：新窗口的名字
參數3：一個以逗號分隔的列表，包含大小和各種屬性
參數4：布爾值，
true：新窗口替換掉窗口瀏覽歷史的當前條目，false：在窗口瀏覽歷史中創建一個新的條目（默認）關閉窗口：w.close();
已關閉的窗口，代表它的
Window對象仍然存在，w.closed屬性為true，它的document為null
-
w.opener屬性引用的是打開它的腳本的Window對象
w.open().opener === w;
- 窗體是通過<iframe>元素創建的
