定義和用法
open() 方法用于打開一個新的瀏覽器窗口或查找一個已命名的窗口。
語法
window.open(URL,name,features,replace)//repalce為true將替換歷史中的當前條目，否則新建條目open('http://www.baidu.com');//新建頁面并打開百度
open('http://www.baidu.com','baidu');//新建頁面并命名窗口并打開百度
open('http://www.baidu.com','_parent');//在本頁窗口打開百度,_blank是新建
<script type="text/Javascript"> //示例1 function open_win() { window.open("child.html","new_win","width=400,height=400",true); } open_win() //示例2 var myWindow=window.open('','MyName','width=200,height=100') myWindow.document.write("This is 'myWindow'") console.log(myWindow.closed);//false myWindow.focus(); myWindow.close(); console.log(myWindow.closed);//true myWindow.opener.document.write("This is the parent window") console.log(window.closed);//false</script>注意：只有表示頂層窗口的 Window 對象的 operner 屬性才有效，表示框架的 Window 對象的 operner 屬性無效瀏覽器窗口位置和尺寸
IE、Safari、Opera和Chrome都提供了screenLeft和screenTop屬性，分別用于表示窗口相對于屏幕左邊和上邊的位置。Firefox則在screenX和screenY屬性中提供相同的窗口位置信息，Safari和Chrome也同時支持這兩個屬性。<script type="text/javascript"> console.log(window.screenLeft); console.log(window.screenX); console.log(window.screenTop); console.log(window.screenY);</script>注意：screenX，screenY是以紅色區域的左上角為基準，其相對于屏幕左上角的距離innerWidth和innerHeight，返回瀏覽器窗口本身的尺寸；outerWidth和outerHeight，返回瀏覽器窗口本身及邊框的尺寸。
<!DOCTYPE html><!DOCTYPE html><head> <meta charset="UTF-8"> <title>Document</title><script type="text/javascript"> console.log(window.innerWidth); console.log(window.innerHeight); console.log(window.outerWidth); console.log(window.outerHeight);</script></script> </head><body> <div style="height:1000px"></div></body></html>紅色區域代表了innerWidth和innerHeight，藍色區域代表了outerWidth和outerHeightIE沒有提供當前瀏覽器窗口尺寸的屬性；不過，在后面的DOM課程中有提供相關的方法。
頁面窗口尺寸
在IE以及Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了頁面窗口的信息。在IE6中，這些屬性必須在標準模式下才有效；如果是怪異模式，就必須通過document.body.clientWidth和document.body.clientHeight取得相同的信息。<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Document</title><script type="text/javascript"> //如果是Firefox瀏覽器，直接使用innerWidth和innerHeight //var width = window.innerWidth; //這里要加window，因為IE會無效 //var height = window.innerHeight; if (typeof width != 'number') { //如果是IE，就使用document if (document.compatMode == 'CSS1Compat') { width = document.documentElement.clientWidth; height = document.documentElement.clientHeight; } else { width = document.body.clientWidth; //非標準模式使用body height = document.body.clientHeight; } } console.log(width); console.log(height);</script> </head><body> <div style="height:1000px"></div></body></html>紅色區域代表了document.documentElement.clientWidth和document.documentElement.clientHeight，可以看到，document.documentElement.clientWidth和document.documentElement.clientHeight獲取的值和innerWidth和innerHeight是一樣的
定時器
<script type="text/javascript"> var timeId = setTimeout(function(name,age){ console.log(name+":"+age);//lisong:26 },100,"lisong",26); //clearTimeout(timeId); var intervalId = setInterval(function(name,age){ console.log(name+":"+age);//lisong1:26 },1000,"lisong1",26); //clearTimeout(intervalId);</script>location對象
提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航功能。事實上，location對象是window對象的屬性，也是document對象的屬性；所以window.location和document.location等效。location屬性
| 屬性 | 描述 |
|---|---|
| hash | 設置或返回從井號 (#) 開始的 URL（錨）。 |
| host | 設置或返回主機名和當前 URL 的端口號。 |
| hostname | 設置或返回當前 URL 的主機名。 |
| href | 設置或返回完整的 URL。 |
| pathname | 設置或返回當前 URL 的路徑部分。 |
| port | 設置或返回當前 URL 的端口號。 |
| PRotocol | 設置或返回當前 URL 的協議。 |
| search | 設置或返回從問號 (?) 開始的 URL（查詢部分）。 |
| assign() | 加載新的文檔。 |
<script type="text/javascript"> location.hash = '#1'; //設置#后的字符串，并跳轉 console.log(location.hash); //獲取#后的字符串 location.port = 8888; //設置端口號，并跳轉 console.log(location.port); //獲取當前端口號， location.hostname = 'Lee'; //設置主機名，并跳轉 console.log(location.hostname); //獲取當前主機名， location.pathname = 'Lee'; //設置當前路徑，并跳轉 console.log(location.pathname); //獲取當前路徑， location.protocal = 'ftp:'; //設置協議，沒有跳轉 console.log(location.protocol); //獲取當前協議 location.search = '?id=5'; //設置?后的字符串，并跳轉 console.log(location.search); //獲取?后的字符串 location.; //設置跳轉的URL，并跳轉 console.log(location.href); //獲取當前的URL*/</script>注意：上面的方法會直接改變地址欄在Web開發中，我們經常需要獲取諸如?id=5&search=ok這種類型的URL的鍵值對，可以先獲取search，再獲取鍵值對頁面加載：<script type="text/javascript"> location.reload();//最有效的重新加載，有可能從緩存加載 location.reload(true);//強制加載，從服務器源頭重新加載 location.replace('http://www.baidu.com');//可以避免產生跳轉前的歷史記錄 location.assign('http://www.baidu.com');//跳轉到新頁面,會產生新的歷史 location.//和assign一樣</script> history對象
history屬性| length | 返回瀏覽器歷史列表中的 URL 數量。 |
| back() | 加載 history 列表中的前一個 URL。 |
| forward() | 加載 history 列表中的下一個 URL。 |
| go() | 加載 history 列表中的某個具體頁面。 |
新聞熱點
疑難解答
