JavaScript學(xué)習(xí)筆記整理（11）：window對(duì)象

var times = setTimeout(function(){},1000); //1000毫秒后執(zhí)行

clearTimeout(times); //取消執(zhí)行

（2）setInterval()

setInterval()方法和setTimeout()一樣，只不過這個(gè)函數(shù)會(huì)在指定毫秒數(shù)的間隔里重復(fù)調(diào)用，也返回一個(gè)值，這個(gè)值傳遞給clearInterval()，用于取消后續(xù)函數(shù)的調(diào)用。

var times = setInterval(function(){},1000);  //每隔1000毫秒調(diào)用一次function

clearInterval(times);  //取消后續(xù)函數(shù)執(zhí)行

注意：如果以0毫秒的超時(shí)時(shí)間來調(diào)用setTimeout()，那么指定的函數(shù)不會(huì)立刻執(zhí)行。相反，會(huì)把它放到隊(duì)列中，等到前面處于等待狀態(tài)的事件處理程序全部執(zhí)行完成后，再“立即”調(diào)用它。

11.2 瀏覽器定位和導(dǎo)航

Window對(duì)象的location屬性引用的是Location對(duì)象，它表示該窗口中當(dāng)前顯示的文檔的URL，并定義了方法來使窗口載入新的文檔。

Document對(duì)象的location屬性也引用到Location對(duì)象：

window.location === document.location  //總是返回true

Document對(duì)象也有一個(gè)URL屬性，是文檔首次載入后保存該文檔的URL的靜態(tài)字符串。如果定位到文檔中的片斷標(biāo)識(shí)符（如#top），Location對(duì)象會(huì)做相應(yīng)的更新，而document.URL屬性卻不會(huì)改變。

11.2.1 解析URL

Location對(duì)象href屬性是一個(gè)字符串，href屬性包含ULR的完整文本。Location對(duì)象的toString()方法返回href屬性的值，因此在會(huì)隱式調(diào)用toString()的情況下，可以用location代替location.href。

// 當(dāng)前網(wǎng)址為 http://user:passwd@www.example.com:4097/path/a.html?x=111#part1location.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1" 
location.protocol // "http:" 
location.host // "www.example.com:4097" 
location.hostname // "www.example.com" 
location.port // "4097" 
location.pathname // "/path/a.html" 
location.search // "?x=111" 
location.hash // "#part1" 
location.user // "user" 
location.password // "passed"

protocol、host、hostname、port、pathname和search屬性是“URL分解”屬性，是可寫的，對(duì)它們重新賦值的話，會(huì)改變URL的位置，并且瀏覽器會(huì)載入一個(gè)新的文檔。

Location對(duì)象的方法：

location.assign()：使窗口載入并顯示指定的URL中的文檔。
location.replace()：和assign()方法類似，但它在載入新文檔之前會(huì)從瀏覽歷史中把當(dāng)前文檔刪除。這樣“后退”按鈕就不會(huì)把瀏覽器帶回到原始文檔。
location.reload()：重新載入當(dāng)前文檔，可傳入一個(gè)布爾值為參數(shù)，默認(rèn)false。如果為true，則優(yōu)先從服務(wù)器重新加載；否則優(yōu)先從本地緩存中重新加載。

當(dāng)然，我們還有更直接跳轉(zhuǎn)到新頁面的方法：

location = 'http://baidu.com';  
//或者
location.;

純粹的片斷標(biāo)識(shí)符是相對(duì)URL的一種類型，它不會(huì)讓瀏覽器載入新文檔，而是使瀏覽器滾動(dòng)到文檔的某個(gè)位置。

注意：#top標(biāo)識(shí)符是個(gè)特殊值：如果文檔中沒有元素的ID是“top”，它會(huì)讓瀏覽器滾動(dòng)到文檔開始處。

location = '#top';  //跳轉(zhuǎn)到文檔的頂部

11.3 瀏覽歷史

Window對(duì)象的history屬性引用的是該窗口的History對(duì)象。History對(duì)象是用來把窗口瀏覽歷史用文檔和文檔狀態(tài)列表的形式表示。

History對(duì)象的length屬性表示瀏覽歷史表中的元素?cái)?shù)量。比如你在當(dāng)前窗口訪問了三個(gè)不同的網(wǎng)址，那么history.length就等于3。

History對(duì)象還提供了一系列的方法，讓我們?cè)跉v史記錄中自由前進(jìn)和后退。

back()：移動(dòng)到上一個(gè)訪問頁面，等同于瀏覽器的后退鍵。  
forward()：移動(dòng)到下一個(gè)訪問頁面，等同于瀏覽器的前進(jìn)鍵。  
go()：接受一個(gè)整數(shù)作為參數(shù)，移動(dòng)到該整數(shù)指定的頁面，比如go(1)相當(dāng)于forward()，go(-1)相當(dāng)于back()。

如果移動(dòng)的位置超出了訪問歷史的邊界，以上三個(gè)方法并不報(bào)錯(cuò)，而是默默的失敗。

history.go(0)相當(dāng)于刷新當(dāng)前頁面。

history.go(0)

注意：如果窗口包含多個(gè)子窗口（比如<iframe>元素），子窗口的瀏覽歷史會(huì)按時(shí)間順序穿插到主窗口的歷史中。這就是意味著主窗口調(diào)用back()可能會(huì)導(dǎo)致其中一個(gè)子窗口往回跳轉(zhuǎn)到前一個(gè)顯示的文檔，而主窗口保留當(dāng)前狀態(tài)不變。

HTML5為history對(duì)象添加了兩個(gè)新方法，用來添加和修改歷史記錄條目。

• history.pushState()：會(huì)改變r(jià)eferrer的值，而在你調(diào)用方法后創(chuàng)建的 XMLHttpRequest 對(duì)象會(huì)在 HTTP 請(qǐng)求頭中使用這個(gè)值。referrer的值則是創(chuàng)建 XMLHttpRequest 對(duì)象時(shí)所處的窗口的URL。
• history.replaceState()：會(huì)修改當(dāng)前歷史記錄條目而并非創(chuàng)建新的條目

（1）history.pushState()

history.pushState方法接受三個(gè)參數(shù)，依次為：  

state：一個(gè)與指定網(wǎng)址相關(guān)的狀態(tài)對(duì)象，popstate事件觸發(fā)時(shí)，該對(duì)象會(huì)傳入回調(diào)函數(shù)。如果不需要這個(gè)對(duì)象，此處可以填null。 
title：新頁面的標(biāo)題，但是所有瀏覽器目前都忽略這個(gè)值，因此這里可以填null。 
url：新的網(wǎng)址，必須與當(dāng)前頁面處在同一個(gè)域。瀏覽器的地址欄將顯示這個(gè)網(wǎng)址。

假定當(dāng)前網(wǎng)址是example.com/1.html，我們使用pushState方法在瀏覽記錄（history對(duì)象）中添加一個(gè)新記錄。

var stateObj = { foo: 'bar' };  
history.pushState(stateObj, 'page 2', '2.html');

添加上面這個(gè)新記錄后，瀏覽器地址欄立刻顯示example.com/2.html，但并不會(huì)跳轉(zhuǎn)到2.html，甚至也不會(huì)檢查2.html是否存在，它只是成為瀏覽歷史中的最新記錄。假定這時(shí)你訪問了google.com，然后點(diǎn)擊了倒退按鈕，頁面的url將顯示2.html，但是內(nèi)容還是原來的1.html。你再點(diǎn)擊一次倒退按鈕，url將顯示1.html，內(nèi)容不變。   

總之，pushState方法不會(huì)觸發(fā)頁面刷新，只是導(dǎo)致history對(duì)象發(fā)生變化，地址欄會(huì)有反應(yīng)。   

如果pushState的url參數(shù)，設(shè)置了一個(gè)新的錨點(diǎn)值（即hash），并不會(huì)觸發(fā)hashchange事件。如果設(shè)置了一個(gè)跨域網(wǎng)址，則會(huì)報(bào)錯(cuò)。

（2）history.replaceState()

history.replaceState方法的參數(shù)與pushState方法一模一樣，區(qū)別是它修改瀏覽歷史中當(dāng)前紀(jì)錄。

假定當(dāng)前網(wǎng)頁是example.com/example.html。

history.pushState({page: 1}, 'title 1', '?page=1');  
history.pushState({page: 2}, 'title 2', '?page=2');  
history.replaceState({page: 3}, 'title 3', '?page=3');   

history.back()  
// url顯示為http://example.com/example.html?page=1   

history.back()  
// url顯示為http://example.com/example.html   

history.go(2)  
// url顯示為http://example.com/example.html?page=3

（3）history.state屬性

history.state屬性返回當(dāng)前頁面的state對(duì)象。

history.pushState({page: 1}, 'title 1', '?page=1');   
history.state  // { page: 1 }

（4）popstate事件

每當(dāng)同一個(gè)文檔的瀏覽歷史（即history對(duì)象）出現(xiàn)變化時(shí)，就會(huì)觸發(fā)popstate事件。

需要注意的是，僅僅調(diào)用pushState方法或replaceState方法 ，并不會(huì)觸發(fā)該事件，只有用戶點(diǎn)擊瀏覽器倒退按鈕和前進(jìn)按鈕，或者使用JavaScript調(diào)用back、forward、go方法時(shí)才會(huì)觸發(fā)。另外，該事件只針對(duì)同一個(gè)文檔，如果瀏覽歷史的切換，導(dǎo)致加載不同的文檔，該事件也不會(huì)觸發(fā)。

使用的時(shí)候，可以為popstate事件指定回調(diào)函數(shù)。這個(gè)回調(diào)函數(shù)的參數(shù)是一個(gè)event事件對(duì)象，它的state屬性指向pushState和replaceState方法為當(dāng)前URL所提供的狀態(tài)對(duì)象（即這兩個(gè)方法的第一個(gè)參數(shù)）。

window.onpopstate = function (event) {   
  console.log('location: ' + document.location);   
  console.log('state: ' + JSON.stringify(event.state));  
};   
// 或者
window.addEventListener('popstate', function(event) {
   console.log('location: ' + document.location);
   console.log('state: ' + JSON.stringify(event.state));  
});

上面代碼中的event.state，就是通過pushState和replaceState方法，為當(dāng)前URL綁定的state對(duì)象。 

這個(gè)state對(duì)象也可以直接通過history對(duì)象讀取。

var currentState = history.state;

注意：頁面第一次加載的時(shí)候，在load事件發(fā)生后，Chrome和Safari瀏覽器（Webkit核心）會(huì)觸發(fā)popstate事件，而Firefox和IE瀏覽器不會(huì)。

11.4 瀏覽器和屏幕信息

Window對(duì)象的navigator和screen屬性，分別引用的是Navigator和Screen對(duì)象。

11.4.1 Navigator對(duì)象

Window對(duì)象的navigator屬性引用的是包含瀏覽器產(chǎn)商和版本信息的Navigator對(duì)象。

Navigator對(duì)象的屬性

（1）navigator.appName、navigator.appVersion

appName是Web瀏覽器的全稱。在IE中，是“Microsoft Internet Explorer”。在其他瀏覽器中，是“Netscape”。

appVersion此屬性通常以數(shù)字開始，并跟著包含瀏覽器產(chǎn)商和版本信息的詳細(xì)字符串。字符串前面的數(shù)字通常是4.0或5.0，表示它是第4或第5代兼容的瀏覽器。

（2）navigator.userAgent

navigator.userAgent屬性返回瀏覽器的User-Agent字符串，標(biāo)示瀏覽器的廠商和版本信息。它包含了appVersion中的所有信息。

下面是Chrome瀏覽器的userAgent。

navigator.userAgent
//Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36

利用這個(gè)屬性，我們還可以判斷手機(jī)瀏覽器的類型。

if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))) {   
  try {   
    if (/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {   
     //手機(jī)瀏覽器
    } else if (/iPad/i.test(navigator.userAgent)) {   
     //ipad 
    } else {}   
  } catch (e) {}   
} else {
    //非手機(jī)瀏覽器  
}

如果你只是簡(jiǎn)單的判斷是否手機(jī)瀏覽器。

var ua = navigator.userAgent.toLowerCase();  
if(/mobi/i.test(ua)){   
  //手機(jī)瀏覽器  
}else{   
  //非手機(jī)瀏覽器  
}

（3）navigator.platform

返回用戶的操作系統(tǒng)信息

比如我的：

navigator.platform
//win32

（4）navigator.onLine

表示瀏覽器當(dāng)前是否連接到網(wǎng)絡(luò)。返回一個(gè)布爾值。

（5）navigator.geolocation

返回一個(gè)Geolocation對(duì)象，包含用戶地理位置信息。詳情請(qǐng)看《HTML5 API》（正在寫...）這篇文章

（6）navigator.javaEnabled()

javaEnabled方法返回一個(gè)布爾值，表示瀏覽器是否能運(yùn)行Java Applet小程序。

（7）navigator.cookieEnable()

cookieEnabled方法返回一個(gè)布爾值，表示瀏覽器是否能儲(chǔ)存Cookie。

11.4.2 Screen對(duì)象

Window對(duì)象的screen屬性引用的是Screen對(duì)象，它提供有關(guān)窗口顯示的大小和可用的顏色數(shù)量的信息。

（1）screen.width、screen.height

screen.width和screen.height分別返回以像素為單位的窗口大?。ㄔO(shè)備的寬高）。

（2）screen.availHeight、screen.availWidth

screen.availHeight和screen.availWidth屬性返回屏幕可用的高度和寬度，單位為像素。它們的值為屏幕的實(shí)際大小減去操作系統(tǒng)某些功能占據(jù)的空間，比如系統(tǒng)的任務(wù)欄。 

（3）screen.colorDepth

screen.colorDepth屬性返回屏幕的顏色深度，一般為16（表示16-bit）或24（表示24-bit）。

11.5 對(duì)話框

Window對(duì)象提供了3個(gè)方法來向用戶顯示簡(jiǎn)單的對(duì)話框。

alert()：向用戶顯示一條消息并等待用戶關(guān)閉對(duì)話框。
confirm()：同樣顯示一條消息，要求用戶單擊“確認(rèn)”或“取消”按鈕，并返回一個(gè)布爾值。
prompt()：同樣顯示一條消息，等待用戶輸入字符串，并返回這個(gè)字符串。

這三個(gè)方法都具有堵塞效應(yīng)，一旦彈出對(duì)話框，整個(gè)頁面就是暫停執(zhí)行，等待用戶做出反應(yīng)。

（1）alert()

alert(1);

（2）confirm()

var c = confirm('確認(rèn)登錄');

confirm的一個(gè)用途是，當(dāng)用戶離開當(dāng)前頁面時(shí)，彈出一個(gè)對(duì)話框，詢問用戶是否真的離開。

window.onunload = function() {   
  return confirm('你確定要離開當(dāng)面頁面嗎？');  
}

（3）prompt()

// 格式  
var result = prompt(text[, default]);

//實(shí)例
var result = prompt('您的年齡？',18);

prompt方法的返回值是一個(gè)字符串（有可能為空）或者null，具體分成三種情況。

用戶輸入信息，并點(diǎn)擊“確定”，則用戶輸入的信息就是返回值。
用戶沒有輸入信息，直接點(diǎn)擊“確定”，則輸入框的默認(rèn)值就是返回值。
用戶點(diǎn)擊了“取消”（或者按了Esc按鈕），則返回值是null。

注意：這些對(duì)話框中顯示的文本是純文本，而不是HTML格式的文本。只能使用空格、換行符或各種標(biāo)點(diǎn)符號(hào)來格式化這些對(duì)話框。

11.6  錯(cuò)誤處理

Window對(duì)象的onerror屬性是一個(gè)事件處理程序，當(dāng)未捕獲的異常傳播到調(diào)用棧上時(shí)就會(huì)調(diào)用它，并把錯(cuò)誤信息輸出到瀏覽器的JavaScript控制臺(tái)上。

window.onerror = function (message, filename, lineno, colno, error) {   
  console.log("出錯(cuò)了！--> %s", error.stack);  
};

五個(gè)參數(shù)的含義：

message：出錯(cuò)信息  
filename：出錯(cuò)腳本的網(wǎng)址  
lineno：行號(hào)  
colno：列號(hào)  
error：錯(cuò)誤對(duì)象

老式瀏覽器只支持前三個(gè)參數(shù)。 

并不是所有的錯(cuò)誤，都會(huì)觸發(fā)JavaScript的error事件（即讓JavaScript報(bào)錯(cuò)），只限于以下三類事件。  

• JavaScript語言錯(cuò)誤 
• JavaScript腳本文件不存在
•  圖像文件不存在
  

以下兩類事件不會(huì)觸發(fā)JavaScript的error事件。 

• CSS文件不存在
•  iframe文件不存在

注意：onerror處理程序的返回值也很重要。如果onerror處理程序返回false，它通知瀏覽器事件處理程序已經(jīng)處理了錯(cuò)誤，不需要其他操作。也就是說，瀏覽器不應(yīng)該顯示它自己的錯(cuò)誤信息。遺憾的是，由于歷史原因，F(xiàn)irefox里的錯(cuò)誤處理程序必須返回true來表示它已經(jīng)處理了錯(cuò)誤。

11.7 多窗口和窗體

由于網(wǎng)頁可以使用<iframe>嵌套多個(gè)網(wǎng)頁，因此一個(gè)網(wǎng)頁之中會(huì)形成多個(gè)窗口。另一情況是，子網(wǎng)頁之中又嵌入別的網(wǎng)頁，形成多級(jí)窗口。每個(gè)窗口的Window對(duì)象都是獨(dú)立的，互不干擾。

瀏覽器提供了一些特殊變量，用來返回其他窗口。  

top：頂層窗口，即最上層的那個(gè)窗口 
parent：父窗口 
self：當(dāng)前窗口，即自身

下面的代碼可以判斷當(dāng)前窗口是否是頂層窗口

window.top === window.self

與這些變量對(duì)應(yīng)，瀏覽器還提供一些特殊的窗口名，供open方法、<a>標(biāo)簽、<form>標(biāo)簽等引用。

_top：頂層窗口  
_parent：父窗口  
_blank：新窗口

11.7.1 打開和關(guān)閉窗口

使用Window對(duì)象的open()方法可以打開一個(gè)新的瀏覽器窗口。Window.open()載入指定的URL到新的或已存在的窗口中，并返回代表那個(gè)窗口的Window對(duì)象。

open方法一共可以接受四個(gè)參數(shù)。

• 第一個(gè)參數(shù)：字符串，表示新窗口的網(wǎng)址。如果省略，默認(rèn)網(wǎng)址就是about:blank。
• 第二個(gè)參數(shù)：字符串，表示新窗口的名字。如果該名字的窗口已經(jīng)存在，則跳到該窗口，不再新建窗口。如果省略，就默認(rèn)使用_blank，表示新建一個(gè)沒有名字的窗口。
• 第三個(gè)參數(shù)：字符串，內(nèi)容為逗號(hào)分隔的鍵值對(duì)，表示新窗口的參數(shù)，比如有沒有提示欄、工具條等等。如果省略，則默認(rèn)打開一個(gè)完整UI的新窗口。
• 第四個(gè)參數(shù)：布爾值，表示第一個(gè)參數(shù)指定的網(wǎng)址，是否應(yīng)該替換history對(duì)象之中的當(dāng)前網(wǎng)址記錄，默認(rèn)值為false。顯然，這個(gè)參數(shù)只有在第二個(gè)參數(shù)指向已經(jīng)存在的窗口時(shí)，才有意義。

var modal = window.open(
  'example.html',
  'modalWindow',
  'height=200,width=300'
);

modal.window.name  //modalWindow

window.close方法用于關(guān)閉當(dāng)前窗口，一般用來關(guān)閉window.open方法新建的窗口。

modal.close();

該方法只對(duì)頂層窗口有效，iframe框架之中的窗口使用該方法無效。

11.7.2 窗體

窗體是通過<iframe>元素創(chuàng)建的，我們可以像獲取其他元素一樣，獲取一個(gè)表示<iframe>的元素對(duì)象，同時(shí)，<iframe>元素有contentWindow屬性，引用該窗體的Window對(duì)象。

<iframe id='f'></iframe>

var f = document.getElementById('f');
var win = f.contentWindow;  //子窗體的Window對(duì)象

var doc = f.contentDocument;  //等同于f.contentWindow.document

//獲取子窗體的變量和屬性
f.funciton()

f.title

iframe嵌入窗口的window對(duì)象，有一個(gè)frameElement屬性，返回它在父窗口中的DOM節(jié)點(diǎn)。對(duì)于頂級(jí)窗口，該屬性等于null。

win.frameElement === f //true
window.frameElement === null //true

當(dāng)然，也可以使用Window對(duì)象的frames屬性，它引用自身包含的窗口或窗體的子窗體。返回一個(gè)類數(shù)組對(duì)象。

var f = window.iframes[0];

注意：frames[]數(shù)組里的元素是Window對(duì)象，而非<iframe>元素。

利用這個(gè)屬性，實(shí)現(xiàn)窗口之間的互相引用。比如，frames[0]返回第一個(gè)子窗口，frames[1].frames[2]返回第二個(gè)子窗口內(nèi)部的第三個(gè)子窗口，parent.frames[1]返回父窗口的第二個(gè)子窗口。

如果<iframe>元素設(shè)置了name或id屬性，那么屬性值會(huì)自動(dòng)成為（Window對(duì)象的屬性）全局變量，并且可以通過window.frames屬性引用，返回子窗口的window對(duì)象。

// HTML代碼為<iframe id="myFrame">  
myFrame // [HTMLIFrameElement]  
frames.myframe === myFrame // true

另外，name屬性的值會(huì)自動(dòng)成為子窗口的名稱，可以用在window.open方法的第二個(gè)參數(shù)，或者<a>和<frame>標(biāo)簽的target屬性。