Javascript BOM學(xué)習(xí)小結(jié)(六)

更新時(shí)間：2015年11月26日 15:05:48 作者：彼岸時(shí)光

BOM：BrowserObjectModel,瀏覽器對(duì)象模型，提供JS中對(duì)瀏覽器的各種操作的對(duì)象，是JS應(yīng)用中唯一沒(méi)有相關(guān)標(biāo)準(zhǔn)的部分，這事BOM經(jīng)常出現(xiàn)問(wèn)題的所在，主要用于處理瀏覽器窗口與框架，瀏覽器特有的JS擴(kuò)展也被默認(rèn)為BOM的一部分，而各瀏覽器之間的公有對(duì)象就成了默認(rèn)的標(biāo)準(zhǔn)

1、BOM簡(jiǎn)介。

　　所謂的BOM即瀏覽器對(duì)象模型（Browser Object Model）。BOM賦予了JS操作瀏覽器的能力，即window操作。DOM則用于創(chuàng)建刪除節(jié)點(diǎn)，操作HTML文檔。BOM尚無(wú)正式的標(biāo)準(zhǔn)，導(dǎo)致各瀏覽器對(duì)于BOM方法的支持各有不同，因此需要具體問(wèn)題具體對(duì)待。

2、window對(duì)象。

　　window對(duì)象是BOM的核心，window對(duì)象指當(dāng)前的瀏覽器窗口。所有JS全局對(duì)象、函數(shù)以及變量都屬于window對(duì)象。全局變量是window對(duì)象的屬性。全局函數(shù)是window對(duì)象的方法。甚至DOM的document也屬于window對(duì)象的屬性之一，只是大多數(shù)情況下可以忽略不寫(xiě)。

　　window對(duì)象方法：　　

3、窗口操作。

　　(1)、打開(kāi)窗口。

　　open() 方法可用于打開(kāi)新窗口。

　　語(yǔ)法：window.open(url, name/target, 窗口設(shè)置, replace)

　　該方法的三個(gè)參數(shù)都是可選的，默認(rèn)在新頁(yè)面打開(kāi)一個(gè)空白頁(yè)。第一個(gè)參數(shù)可設(shè)置要打開(kāi)窗口的路徑。第二個(gè)參數(shù)規(guī)定在何處打開(kāi)新窗口，也可用于指定窗口的名稱(chēng)。第三個(gè)參數(shù)設(shè)置窗口參數(shù)，多個(gè)參數(shù)可用逗號(hào)分隔。如果有第一個(gè)參數(shù)，后面兩個(gè)參數(shù)可省略，則在新頁(yè)面打開(kāi)。第二個(gè)參數(shù)一般無(wú)需設(shè)置，如果要規(guī)定窗口的參數(shù)，則必須有第二個(gè)參數(shù)，必須為'_blank'，或者用'',代替，并且距離屏幕頂部不能為0，否則失效，如果設(shè)置了左邊距離，頂部可設(shè)置為0。最后一個(gè)參數(shù)規(guī)定加載到窗口的URL是在窗口的瀏覽歷史中創(chuàng)建一個(gè)條目，還是替換瀏覽器歷史中的當(dāng)前條目，值為true或false，值為true時(shí)URL替換瀏覽歷史中的當(dāng)前條目，為false時(shí)URL在瀏覽歷史中創(chuàng)建新的條目。

　　下表是一些常用的窗口設(shè)置參數(shù)：

　　實(shí)例：點(diǎn)擊按鈕，在新窗口打開(kāi)百度首頁(yè)，寬600，高400，距屏頂0像素，屏左10像素。

 <body>
 <input type="button" onClick="newWin()" value="點(diǎn)擊我，打開(kāi)新窗口!">
 <script>
 function newWin(){
   window.open('http://www.baidu.com', '_blank', 'width=,height=,top=,left=');
 }
 </script>
 </body>

　　該實(shí)例在IE下并不會(huì)打開(kāi)一個(gè)自定義的窗口，而是新打開(kāi)一個(gè)標(biāo)簽頁(yè)。

　　如果在腳本中直接打開(kāi)新窗口，在Chrome和FF下會(huì)被當(dāng)作廣告彈窗直接攔截，但是在IE下可以正常顯示。360瀏覽器的極速模式使用的是Chrome的內(nèi)核，兼容模式則使用的IE內(nèi)核，360瀏覽器使用人群相對(duì)較多，這里就不描述了，只要其余瀏覽器正常運(yùn)行，他就沒(méi)什么問(wèn)題。

 <script>
 window.open(); 
 window.open('http://baidu.com');
 </script>

　　實(shí)例：獲得焦點(diǎn)和失去焦點(diǎn)

 <body>
 <input type="button" value="獲得焦點(diǎn)" onclick="openWin()">
 <script>
 //確保新的窗口獲得焦點(diǎn)：
 function openWin(){
   var oGet=window.open('', '', 'width=,height=');
   oGet.document.write('<p>我是新打開(kāi)的窗口</p>');
   oGet.focus();
 }
 </script>
 <input type="button" value="失去焦點(diǎn)" onclick="newWin()">
 <script>
 //確保新的窗口沒(méi)有獲得焦點(diǎn)：
 function newWin(){
   var lose=window.open('', '', 'width=,height=');
   lose.document.write('<p>我是新打開(kāi)的窗口</p>');
   lose.blur();
 }
 </script>
 </body>

　　實(shí)例：返回新打開(kāi)窗口的名稱(chēng)

 <body>
 <input type="button" value="打開(kāi)" onclick="openWin()">
 <script>
 function openWin(){
   var newWin=window.open('', 'newWindow', 'width=,height=');
   newWin.document.write('<p>新窗口名稱(chēng)：'+ newWin.name + '</p>');
 }
 </script>
 </body>

　　實(shí)例：打開(kāi)新窗口向父窗口傳遞信息

 <body>
 <input type="button" value="打開(kāi)" onclick="openWin()">
 <script>
 function openWin(){
   var newWin=window.open('', '', 'width=,height=');
   newWin.document.write("<p>關(guān)閉我之后會(huì)向父窗口輸入文本信息</p>");
   newWin.focus();
   newWin.opener.document.write('<p>我是父窗口，加載完成后，向我輸出內(nèi)容會(huì)覆蓋我所有內(nèi)容</p>');
 }
 </script>
 </body>

　　實(shí)例：指定窗口大小、移動(dòng)窗口和滾動(dòng)內(nèi)容

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript實(shí)例</title>
 </head>
 <body>
 <br><br>
 <h>用指定像素調(diào)整窗口大小：</h>
 <input type="button" value="打開(kāi)" onclick="openWin()"><br><br>
 <input type="button" value="調(diào)整" onclick="byWin()">
 <script>
 var w;
 function openWin(){
   w=window.open('', '', 'width=,height=,top=');
   w.focus();
 }
 function byWin(){
   //如果不使用框架，可使用window代替top
   w.top.resizeBy(,);
   w.focus();
 }
 </script>
 <h>將窗口的大小調(diào)整到指定的寬度和高度：</h>
 <input type="button" value="打開(kāi)" onclick="newWin()"><br><br>
 <input type="button" value="調(diào)整" onclick="toWin()">
 <script>
 var w;
 function newWin(){
   w=window.open('', '', 'width=,height=');
   w.focus();
 }
 function toWin(){
   w.resizeTo(,);
   w.focus();
 }
 </script>
 <h>相對(duì)于當(dāng)前位置移動(dòng)新窗口：</h>
 <input type="button" value="打開(kāi)" onclick="oWin()"><br><br>
 <input type="button" value="多移動(dòng)幾下" onclick="moveWin()">
 <script>
 var w;
 function oWin(){
   w=window.open('', '', 'width=,height=');
 }
 function moveWin(){
   w.moveBy(,);
   w.focus();
 }
 </script>
 <h>移動(dòng)新窗口到指定位置：</h>
 <input type="button" value="打開(kāi)" onclick="nWin()"><br><br>
 <input type="button" value="移動(dòng)" onclick="moveToWin()">
 <script>
 var w;
 function nWin(){
   w=window.open('', '', 'width=,height=');
 }
 function moveToWin(){
   w.moveTo(,);
   w.focus();
 }
 </script>
 <h>由指定的像素?cái)?shù)滾動(dòng)內(nèi)容：</h>
 <input type="button" style="position:fixed;top:;" onclick="scrollWin()" value="由指定的像素?cái)?shù)滾動(dòng)內(nèi)容">
 <script>
 function scrollWin(){
   window.scrollBy(,);
 }
 </script>
 <h>滾動(dòng)到指定內(nèi)容處：</h>
 <input type="button" onclick="scrollWindow()" value="滾動(dòng)到指定內(nèi)容處">
 <script>
 function scrollWindow(){
   window.scrollTo(,);
 }
 </script>
 <br><br><br><br><br><br>
 </body>
 </html>

　　方法解析：

　　resizeBy(w, h)：根據(jù)指定的像素來(lái)調(diào)整窗口的大小。該方法定義指定窗口的右下角移動(dòng)的像素，左上角將不會(huì)被移動(dòng)(它停留在其原來(lái)的坐標(biāo))。

　　該方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是必需的，指定窗口寬度增加的像素?cái)?shù)。第二個(gè)參數(shù)可選，指定窗口高度增加的像素?cái)?shù)。兩個(gè)參數(shù)可為正數(shù)，也可為負(fù)數(shù)。

　　resizeTo(w, h)：用于把窗口大小調(diào)整為指定的寬度和高度。

　　該方法兩個(gè)參數(shù)都是必需的，用來(lái)指定設(shè)置窗口的寬度和高度，以像素計(jì)。

　　moveBy(xnum, ynum)：可相對(duì)窗口的當(dāng)前坐標(biāo)把它移動(dòng)指定的像素。

　　該方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)指定要把窗口右移的像素?cái)?shù)，第二個(gè)參數(shù)指定要把窗口下移的像素?cái)?shù)。

　　moveTo(x, y)：可把窗口的左上角移動(dòng)到一個(gè)指定的坐標(biāo)。

　　該方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)指定窗口新位置的 x 坐標(biāo)，第二個(gè)參數(shù)指定窗口新位置的 y 坐標(biāo)。

　　scrollBy(xnum, ynum)：可把內(nèi)容滾動(dòng)指定的像素?cái)?shù)。

　　該方法有兩個(gè)必需參數(shù)，第一個(gè)參數(shù)指定把文檔向右滾動(dòng)的像素?cái)?shù)。第二個(gè)參數(shù)指定把文檔向下滾動(dòng)的像素?cái)?shù)。

　　scrollTo(x, y)：可把內(nèi)容滾動(dòng)到指定的坐標(biāo)。

　　該方法有兩個(gè)必需參數(shù)，第一個(gè)指定要在窗口文檔顯示區(qū)左上角顯示的文檔的 x 坐標(biāo)。第二個(gè)參數(shù)指定要在窗口文檔顯示區(qū)左上角顯示的文檔的 y 坐標(biāo)。

　　實(shí)例：打印當(dāng)前頁(yè)面

 <body>
 <input type="button" value="打印當(dāng)前頁(yè)面" onclick="printpage()">
 <script>
 function printpage(){
   window.print();
 }
 </script>
 </body>

　　(2)、關(guān)閉窗口。

　　window.close()方法可用于關(guān)閉當(dāng)前窗口。

 //點(diǎn)擊按鈕關(guān)閉當(dāng)前窗口
 <input type="button" value="關(guān)閉窗口" onclick="window.close()">

　　該方法在Chrome下運(yùn)行正常。IE下彈窗提示：你查看的網(wǎng)頁(yè)正在試圖關(guān)閉選項(xiàng)卡，是否關(guān)閉選項(xiàng)卡？點(diǎn)擊否，不關(guān)閉，點(diǎn)擊是，關(guān)閉窗口。在FF下會(huì)報(bào)錯(cuò)。因?yàn)樵贔F下不允許腳本關(guān)閉非腳本打開(kāi)的窗口，也就是不能關(guān)閉一個(gè)用戶(hù)自己打開(kāi)的窗口，只能關(guān)閉由open打開(kāi)的窗口。所以可以先用open打開(kāi)，再關(guān)閉，這樣就能解決FF下不能關(guān)閉的問(wèn)題。這就需要?jiǎng)?chuàng)建兩個(gè)文檔來(lái)演示該問(wèn)題：第二個(gè)文檔使用上面實(shí)例保存為close.html，第一個(gè)文檔如下：

 //先用open打開(kāi)保存的文檔，然后再點(diǎn)擊關(guān)閉窗口按鈕，效果就達(dá)到了
 <input type="button" value="打開(kāi)窗口" onclick="window.open('close.html');">

　　FF瀏覽器的安全機(jī)制比較高，不能關(guān)閉用戶(hù)打開(kāi)的窗口，在網(wǎng)上也沒(méi)找有找到什么好的辦法，只能修改瀏覽器的默認(rèn)配置，顯然這是不可取的。上面的辦法比較笨，另辟蹊蹺不能關(guān)閉用戶(hù)打開(kāi)的，那就自己open一個(gè)再close，但這還是比較實(shí)在的方法，至少目的是達(dá)到了。

　　在IE下可使用下面的代碼關(guān)閉當(dāng)前窗口，不彈窗提示。同時(shí)也適用于Chrome。這里使用a標(biāo)簽在FF下可以看到報(bào)錯(cuò)，使用按鈕則沒(méi)有報(bào)錯(cuò)信息。

 <a href="javascript:window.opener=null;window.open('', '_self');window.close();">關(guān)閉</a>

　　實(shí)例：關(guān)閉新打開(kāi)的窗口

 <body>
 <input type="button" value="打開(kāi)" onclick="openWin()">
 <input type="button" value="關(guān)閉" onclick="closeWin()">
 <script>
 function openWin(){
   newWin=window.open('http://www.baidu.com', '', 'width=,height=,top=');
 }
 function closeWin(){
   newWin.close();
 }
 </script>
 </body>

　　實(shí)例：檢查新窗口是否已關(guān)閉

<body>
 <input type="button" value="打開(kāi)'" onclick="openWin()">
 <input type="button" value="關(guān)閉" onclick="closeWin()">
 <input type="button" value="是否關(guān)閉" onclick="checkWin()">
 <p id="p"></p>
 <script>
 var newWin;
 function openWin(){
   newWin=window.open('', '', 'width=,height=,top=');
 }
 function closeWin(){
   if(newWin){
     newWin.close();
   }
 }
 var oP=document.getElementById('p');
 function checkWin(){
   if(!newWin){
     oP.innerHTML='新窗口還沒(méi)被打開(kāi)！';
   }
   else{
     if(newWin.closed){ 
       oP.innerHTML='新窗口已關(guān)閉！';
     }
     else{
       oP.innerHTML='新窗口未關(guān)閉！';
     }
   }  
 }
 </script>
 </body>

4、瀏覽器信息。

　　window.navigator對(duì)象獲取包含有關(guān)訪(fǎng)問(wèn)者瀏覽器的信息。該屬性在使用時(shí)可以不加window前綴。

<body>
 <div id="div"></div>
 <script>
 txt = '<p>Browser CodeName（瀏覽器代碼名稱(chēng)）: ' + navigator.appCodeName + '</p>';
 txt+= '<p>Browser Name（瀏覽器名稱(chēng)）: ' + navigator.appName + '</p>';
 txt+= '<p>Browser Version（瀏覽器版本）: ' + navigator.appVersion + '</p>';
 txt+= '<p>Cookies Enabled（啟用Cookies）: ' + navigator.cookieEnabled + '</p>';
 txt+= '<p>Platform（操作平臺(tái)）: ' + navigator.platform + '</p>';
 txt+= '<p>User-agent header（由客戶(hù)機(jī)發(fā)送服務(wù)器的 user-agent 頭部信息）: ' + navigator.userAgent + '</p>';
 txt+= '<p>User-agent language（客戶(hù)機(jī)代理語(yǔ)言）: ' + navigator.systemLanguage + '</p>';
 document.getElementById('div').innerHTML=txt;
 </script>
 </body>

　　其中最常用的屬性是navigator.userAgent，返回用戶(hù)代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)，是識(shí)別瀏覽器的關(guān)鍵，可用于獲取當(dāng)前瀏覽器版本信息，判斷瀏覽器的類(lèi)型。

 <script>
 document.write(navigator.userAgent);
 </script>

　　實(shí)例：簡(jiǎn)單的判斷瀏覽器類(lèi)型

<script>
 document.write('操作平臺(tái)：' + navigator.platform);
 function userBrowser(){
   var name = window.navigator.userAgent;
   //IE瀏覽器
   //判斷IE和非IE可以使用ActiveXObject，只有IE支持該對(duì)象
   //在IE中window.ActiveXObject返回一個(gè)對(duì)象，則判斷為true
   //其他瀏覽器都返回undefine，兩個(gè)否返回false，進(jìn)入或判斷，也返回false
   if(!!window.ActiveXObject || 'ActiveXObject' in window){
     return 'IE瀏覽器';
   }
   //FF瀏覽器
   else if(name.indexOf('Firefox') > -){
     return 'Firefox瀏覽器';
   }
   //Chrome瀏覽器
   else if(name.indexOf('Chrome') > -){
     return 'Chrome瀏覽器';
   }
   //Opera瀏覽器
   else if(name.indexOf('Opera') > -){
     return 'Opera瀏覽器';
   }
   //Safari瀏覽器
   else if(name.indexOf('Safari') > -){
     return 'Safari瀏覽器';
   }
   else{
     return 'unknow';
   }
 }
 alert('瀏覽器類(lèi)型為：' + userBrowser());
 </script>

5、頁(yè)面地址。

　　window.location對(duì)象用于獲得當(dāng)前頁(yè)面的地址 (URL)，并把瀏覽器重定向到新的頁(yè)面，簡(jiǎn)單說(shuō)就是可以給賦值，像使用open一樣。

　　語(yǔ)法:location.[屬性|方法]

 <script>
 //當(dāng)前頁(yè)面URL。若中間出現(xiàn)亂碼百分號(hào)是中文轉(zhuǎn)碼后的顯示。
 document.write(window.location);
 </script>
 <input type="button" value="點(diǎn)擊查看" onclick="window.location='http://www.baidu.com','_blank'">
 </body>

　　location對(duì)象其他應(yīng)用：

　　(1)、location對(duì)象屬性

　　　　location.hash　　設(shè)置或返回從井號(hào)(#)開(kāi)始的 URL（錨）。

　　　　location.href　　設(shè)置或返回完整的 URL。

　　　　location.pathname　　設(shè)置或返回當(dāng)前 URL 的路徑部分。

　　　　location.host　　設(shè)置或返回主機(jī)名和當(dāng)前 URL 的端口號(hào)。

　　　　location.hostname　　設(shè)置或返回當(dāng)前 URL 的主機(jī)名，不包含端口。

　　　　location.port　　設(shè)置或返回當(dāng)前 URL 的端口號(hào) （80 或 443）。

　　　　location.protocol　　返回所使用的 web 協(xié)議（http:// 或 https://）。

　　　　location.search　　設(shè)置或返回從問(wèn)號(hào)(?)開(kāi)始的 URL（查詢(xún)部分）。

　　(2)、location對(duì)象方法

　　　　實(shí)例：加載一個(gè)新文檔

 <input type="button" value="點(diǎn)擊加載" onclick="newDoc()">
 <script>
 function newDoc(){
   window.location.assign('http://www.baidu.com')
 }
 </script>

實(shí)例：重新載入當(dāng)前文檔

 <input type="button" value="點(diǎn)擊載入" onclick="reloadPage()">
 <script>
 function reloadPage(){
   location.reload()
 }
 </script>

實(shí)例：用新的文檔替換當(dāng)前文檔

 <input type="button" value="點(diǎn)擊替換" onclick="replaceDoc()">
 <script>
 function replaceDoc(){
   window.location.replace('http://www.baidu.com')
 }
 </script>

6、瀏覽器尺寸。

　　window.screen對(duì)象用于獲取用戶(hù)的屏幕信息。在使用時(shí)候可以不加window前綴。

　　(1)、屏幕分辨率的寬度和高度

　　screen.colorDepth返回用戶(hù)瀏覽器表示的顏色位數(shù)，通常為32位（每像素的位數(shù)）。

　　screen.width和screen.height返回屏幕分辨率的寬度和高度。

 <script>
 document.write( '屏幕寬度：' + screen.width + 'px' );
 document.write('<br>');
 document.write( '屏幕高度：' + screen.height + 'px' );
 </script>

　　(2)、可用寬度和高度

　　screen.availWidth和screen.availHeight返回窗口可以使用的屏幕寬度和高度，不包括窗口任務(wù)欄。

　　不同系統(tǒng)的窗口任務(wù)欄默認(rèn)高度不一樣，任務(wù)欄的位置可在屏幕上下左右任何位置，所以有可能可用寬度和高度也不一樣。

 <script>
 document.write('可用寬度：' + screen.availWidth +'px');
 document.write('<br>');
 document.write('可用高度：' + screen.availHeight +'px');
 </script>

7、工作區(qū)尺寸。

　　(1)、可視區(qū)寬度和高度。

　　獲取瀏覽器窗口尺寸（瀏覽器的視口，不包括工具欄和滾動(dòng)條）的方法:

　?、?、IE9以上及現(xiàn)在瀏覽器都支持：

　　window.innerWidth　　獲取瀏覽器窗口的內(nèi)部寬度。

　　window.innerHeight　　獲取瀏覽器窗口的內(nèi)部高度。

　?、?、對(duì)于IE9之前可以用：

　　document.documentElement.clientWidth　　表示HTML文檔所在窗口的當(dāng)前寬度。
　　document.documentElement.clientHeight　　表示HTML文檔所在窗口的當(dāng)前高度。

　　或者可以使用：

　　Document對(duì)象的body屬性對(duì)應(yīng)HTML文檔的<body>標(biāo)簽

　　document.body.clientWidth　　
　　document.body.clientHeight

　　在不同瀏覽器都可以使用的兼容寫(xiě)法：

　var w = document.documentElement.clientWidth || document.body.clientWidth;
　　var h = document.documentElement.clientHeight || document.body.clientHeight;
 <script>
 //對(duì)于IE+、Chrome、Firefox、Opera 以及 Safari：
 document.write('可視寬為：'+window.innerWidth + '<br>');
 document.write('可視高為：'+window.innerHeight + '<br>'+ '<br>');
 document.write('可視寬為：'+document.documentElement.clientWidth + '<br>');
 document.write('可視高為：'+document.documentElement.clientHeight + '<br>'+ '<br>');
 //注意該方法返回的數(shù)值與其他不同
 document.write('可視寬為：'+document.body.clientWidth + '<br>');
 document.write('可視高為：'+document.body.clientHeight + '<br>'+ '<br>');
 var w= document.documentElement.clientWidth || document.body.clientWidth;
 var h= document.documentElement.clientHeight || document.body.clientHeight;
 document.write('可視寬為：'+ w +'<br>'+ '可視高為：' +h);
 </script>

　　(2)、實(shí)際網(wǎng)頁(yè)尺寸。

　　scrollHeight和scrollWidth，獲取網(wǎng)頁(yè)內(nèi)容高度和寬度。

　　scrollHeight和scrollWidth還可獲取DOM元素中內(nèi)容實(shí)際占用的高度和寬度。

　　在IE下scrollHeight 是網(wǎng)頁(yè)內(nèi)容實(shí)際高度，可以小于clientHeight。在FF下scrollHeight 是網(wǎng)頁(yè)內(nèi)容高度，不過(guò)最小值是 clientHeight。也就是說(shuō)網(wǎng)頁(yè)內(nèi)容實(shí)際高度小于 clientHeight 時(shí)，scrollHeight返回 clientHeight 。

　　在不同瀏覽器都可以使用的兼容寫(xiě)法：

　　var w =document.documentElement.scrollWidth || document.body.scrollWidth;
　　var h =document.documentElement.scrollHeight || document.body.scrollHeight;

<script>
 //兼容性寫(xiě)法
 var w =document.documentElement.scrollWidth || document.body.scrollWidth;
 var h=document.documentElement.scrollHeight || document.body.scrollHeight;
 document.write('網(wǎng)頁(yè)內(nèi)容寬為：'+ w +'<br>'+ '網(wǎng)頁(yè)內(nèi)容高為：' +h);
 </script>

　　(3)、包含滾動(dòng)條的網(wǎng)頁(yè)尺寸。

　　offsetHeight和offsetWidth，獲取網(wǎng)頁(yè)內(nèi)容高度和寬度(包括滾動(dòng)條等邊線(xiàn)，會(huì)隨窗口的顯示大小改變)。

　　offsetHeight = clientHeight(內(nèi)容可視區(qū)高度) + 滾動(dòng)條 + 邊框。

 <script>
 //兼容性寫(xiě)法
 var w = document.documentElement.offsetWidth || document.body.offsetWidth;
 var h = document.documentElement.offsetHeight || document.body.offsetHeight;
 document.write('網(wǎng)頁(yè)內(nèi)容寬為：'+ w +'<br>'+ '網(wǎng)頁(yè)內(nèi)容高為：' +h);
 </script>

　　(4)、滾動(dòng)距離

　　所謂滾動(dòng)距離，就是可視區(qū)距離頁(yè)面頂部滾動(dòng)了多遠(yuǎn)，也叫網(wǎng)頁(yè)卷去的距離。

　　scrollTop：設(shè)置或獲取位于對(duì)象最頂端與窗口中可見(jiàn)內(nèi)容的最頂部之間的距離，也就是網(wǎng)頁(yè)被滾動(dòng)的高度。

　　scrollLeft：設(shè)置或獲取位于給定對(duì)象左邊界與窗口中目前可見(jiàn)內(nèi)容的最左端之間的距離，也就是網(wǎng)頁(yè)被滾動(dòng)的寬度。

　　offsetTop：獲取指定對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算頂部位置，當(dāng)前對(duì)象到其上級(jí)頂部的距離，或者距離頁(yè)面頂部的距離。

　　offsetLeft：獲取指定對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置，當(dāng)前對(duì)象到其上級(jí)左端的距離，或者距離頁(yè)面左端的距離。

　　offsetTop和offsetLeft不能賦值，設(shè)置對(duì)象到頁(yè)面頂部的距離可用style.top屬性，設(shè)置對(duì)象到頁(yè)面左部的距離請(qǐng)用style.left屬性。

　　offsetParent：頁(yè)面中設(shè)置postion屬性(relative、absolute、fixed)的父容器，從最近的父節(jié)點(diǎn)開(kāi)始，一層層向上找，直到HTML的body。該屬性用于獲取一個(gè)元素用于定位的父級(jí)，語(yǔ)法：obj.offsetParent

　　實(shí)例：滾動(dòng)頁(yè)面，點(diǎn)擊頁(yè)面查看滾動(dòng)距離

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript實(shí)例</title>
 <script>
 //幾款瀏覽器每次滾動(dòng)，距離頂部的距離都不一樣：
 //在Chrome為：-----。都是整數(shù)遞進(jìn)。
 //而在FF下則為：----。每次遞進(jìn)。
 //而在IE下則為：----。每次遞進(jìn)則為。
 window.onload=function (){
   document.onclick=function (){
     var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
     alert(scrollTop);
   };
 };
 </script>
 </head>
 <body style="height:px">
 </body>
 </html>

　　該知識(shí)點(diǎn)相當(dāng)重要，而且內(nèi)容比較混亂，不容易理解，需要做大量練習(xí)，鞏固所學(xué)。

8、瀏覽器歷史記錄。

　　window.history對(duì)象記錄了用戶(hù)曾經(jīng)瀏覽過(guò)的頁(yè)面(URL)，并可以實(shí)現(xiàn)瀏覽器前進(jìn)與后退導(dǎo)航的功能。從窗口被打開(kāi)的那一刻開(kāi)始記錄，每個(gè)瀏覽器窗口、每個(gè)標(biāo)簽頁(yè)乃至每個(gè)框架，都有自己的history對(duì)象與特定的window對(duì)象關(guān)聯(lián)。在使用時(shí)可以不加window前綴。

　　語(yǔ)法：window.history.[屬性|方法]

　　(1)、History 對(duì)象屬性

　　歷史記錄不唯一，所以該對(duì)象具有l(wèi)ength屬性，可返回瀏覽器歷史列表中的URL數(shù)量。

　　(2)、History 對(duì)象方法

　?、?、history.back()　　加載 history 列表中的前一個(gè)URL，就是返回前一個(gè)頁(yè)面，與瀏覽器點(diǎn)擊后退按鈕功能相同。

　　　　該方法等同于：history.go(-1);

　?、?、history.forward()　　加載 history 列表中的下一個(gè) URL。就是返回下一個(gè)頁(yè)面，與瀏覽器的前進(jìn)按鈕功能相同。

　　　　該方法等同于：history.go(1);

　?、邸istory.go(num)　　根據(jù)當(dāng)前所處的頁(yè)面，加載 history 列表中的某個(gè)具體的頁(yè)面。

　　　　參數(shù)說(shuō)明：1為前一個(gè)，go(1)等價(jià)forward()。0為當(dāng)前頁(yè)面。-1下一個(gè)頁(yè)面，后一個(gè)，go(-1)等價(jià)back()。

　　　　也可為其他數(shù)值，指定要訪(fǎng)問(wèn)的URL在History的URL列表中的相對(duì)位置。

　　　　比如：history.go(-2);　　返回當(dāng)前頁(yè)面之前瀏覽過(guò)的第二個(gè)歷史頁(yè)面，相當(dāng)于點(diǎn)擊2次后退按鈕。

　　　　history.go(3);　　返回當(dāng)前頁(yè)面之后瀏覽過(guò)的第三個(gè)歷史頁(yè)面。

9、Cookie

　　Cookie 用于存儲(chǔ) web 頁(yè)面的用戶(hù)信息。就是一些數(shù)據(jù)，比如自動(dòng)登錄和記住用戶(hù)名，存儲(chǔ)在用戶(hù)電腦上的文本文件中，方便再次使用。當(dāng) web 服務(wù)器向?yàn)g覽器發(fā)送 web 頁(yè)面時(shí)，在連接關(guān)閉后，服務(wù)端不會(huì)記錄用戶(hù)的信息。Cookie 的作用就是用于解決 "如何記錄客戶(hù)端的用戶(hù)信息"：當(dāng)用戶(hù)訪(fǎng)問(wèn) web 頁(yè)面時(shí)，他的名字可以記錄在 cookie 中。在用戶(hù)下一次訪(fǎng)問(wèn)該頁(yè)面時(shí)，可以在 cookie 中讀取用戶(hù)訪(fǎng)問(wèn)記錄。

　　cookie是以域名為單位的，同一個(gè)網(wǎng)站中所有頁(yè)面共享一套cookie，一般不會(huì)超過(guò)50條，大小為4k-10k左右。限制數(shù)量和存儲(chǔ)大小，這樣也阻止了惡意網(wǎng)站給cookie中惡意存儲(chǔ)，不然一會(huì)計(jì)算機(jī)硬盤(pán)就滿(mǎn)了。cookie也是有過(guò)期時(shí)間的，比如網(wǎng)頁(yè)中的自動(dòng)登錄，有些為2周內(nèi)，有些為1周內(nèi)，當(dāng)然過(guò)期時(shí)間是可以自行定義的，用戶(hù)也可以自行清理。

　　在JS中使用cookie很簡(jiǎn)單，就是document.cookie　　該屬性可用來(lái)創(chuàng)建、讀取和刪除cookie。

　　語(yǔ)法：名稱(chēng)=值

　　當(dāng)瀏覽器從服務(wù)器上請(qǐng)求 web 頁(yè)面時(shí)，屬于該頁(yè)面的 cookie 會(huì)被添加到該請(qǐng)求中。服務(wù)端通過(guò)這種方式來(lái)獲取用戶(hù)的信息。

　　提示：跟cookie相關(guān)的本地測(cè)試最好都用FF，只有FF會(huì)保存本地的cookie，其他瀏覽器都不會(huì)保存。在IE下也可以測(cè)試。

　　FF下查看方法：可點(diǎn)擊頁(yè)面右鍵 - 查看頁(yè)面信息 - 安全 - 查看cookie，空白的文件夾就是本地的cookie。

(1)、創(chuàng)建和讀取cookie

　　默認(rèn)情況下，cookie屬于當(dāng)前頁(yè)面并在瀏覽器關(guān)閉時(shí)刪除。

　　ccokie中的=不是賦值，而是添加，可多次添加，并不會(huì)發(fā)生后面將前面覆蓋的情況。

　　expires：有效日期，用于指定cookie的過(guò)期時(shí)間。如過(guò)不設(shè)置，瀏覽器關(guān)閉時(shí)cookie就被刪除了。

　　path：可用于設(shè)置cookie的路徑。

　　cookie可直接被讀取，或者存儲(chǔ)與變量中。

　　document.cookie 將以字符串的方式返回所有的cookie，格式： cookie1=value; cookie2=value; cookie3=value;

實(shí)例：創(chuàng)建用戶(hù)登錄信息，設(shè)置2周后過(guò)期，并讀取cookie

 <script>
 var oD=new Date();
 //從當(dāng)天起天也就是周后是幾號(hào)
 oD.setDate(oD.getDate()+);
 //設(shè)置過(guò)期時(shí)間周。可在查看cookie中看到user的過(guò)期時(shí)間為周后
 document.cookie='user=小白;expires='+oD;
 //瀏覽器關(guān)閉刪除本條cookie。pass的過(guò)期時(shí)間為在會(huì)話(huà)結(jié)束時(shí)。
 document.cookie='pass=';
 //讀取cookie
 alert(document.cookie);
 </script>

(2)、修改cookie

　　修改cookie類(lèi)似于創(chuàng)建cookie，新的cookie會(huì)覆蓋舊的cookie，其實(shí)并不能說(shuō)是被覆蓋了，而是新的cookie 將被添加到 document.cookie 中顯示。

<script>
 var oD=new Date();
 oD.setDate(oD.getDate()+);
 document.cookie='user=小白;expires='+oD;
 document.cookie='pass=';
 //可在查看cookie中看到user和pass的內(nèi)容都被新的cookie替換了
 document.cookie='user=小明;expires='+oD;
 document.cookie='pass=';
 //讀取cookie
 alert(document.cookie);
 </script>

(3)、刪除cookie

　　刪除 cookie 非常簡(jiǎn)單。只需要設(shè)置 expires 參數(shù)為以前的時(shí)間即可，也就是設(shè)置為-1，昨天過(guò)期，瀏覽器一看這不是昨天就過(guò)期么，直接刪除。

下面是設(shè)置、獲取和刪除cookie的封裝函數(shù)，方便以后使用。

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>Cookie封裝函數(shù)</title>
 </head>
 <body>
 <script>
 //設(shè)置cookie
 //參數(shù):cookie的名字，參數(shù)：cookie的值，參數(shù)：cookie過(guò)期時(shí)間
 function setCookie(name, value, iDay){
  var oDate=new Date();
  oDate.setDate(oDate.getDate()+iDay);
  document.cookie=name+'='+value+'; expires='+oDate;
 }
 //userName一年后過(guò)期，passWord兩周后過(guò)期。
 setCookie('userName', '小白', );
 setCookie('passWord', '', );
 //獲取cookie
 //參數(shù)為cookie的名稱(chēng)
 function getCookie(name){
   //用字符串將cookie分割，注意要用：默認(rèn)的cookie樣式，分號(hào)加空格。
   var arr=document.cookie.split('; ');
   for(var i=;i<arr.length;i++){
     //默認(rèn)字符串顯示為：a=; b=; c=
     //所以用等號(hào)再做一次分隔
     var result=arr[i].split('=');
     //result的第一位存名稱(chēng)
     //如果第一位等于name，就說(shuō)明找到想要的了,就返回第二位的值。
     if(result[]==name){
       //result的第二位存值
       return result[];
     }
   }
   //如果沒(méi)有cookie就返回一個(gè)空字符串。比如有些用戶(hù)是第一次進(jìn)入網(wǎng)站，就沒(méi)有產(chǎn)生cookie。
   return '';
 }
 //獲取cookie中passWord的值
 alert(getCookie('passWord'));
 //參數(shù)為刪除哪條cookie
 function removeCookie(name){
   //參數(shù)：cookie的值，表示隨便一個(gè)。參數(shù)：昨天過(guò)期，立馬刪除。
   setCookie(name, , -);
 }
 //將cookie中userName和passWord刪除。
 //在點(diǎn)擊查看頁(yè)面信息，之前保存的cookie就不存在了。
 removeCookie('userName');
 removeCookie('passWord');
 </script>
 </body>
 </html>

　　(4)、cookie小應(yīng)用：記住上一次的用戶(hù)名

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>記住上一次的用戶(hù)名</title>
 <script>
 function setCookie(name, value, iDay){
   var oDate=new Date();
   oDate.setDate(oDate.getDate()+iDay);
   document.cookie=name+'='+value+'; expires='+oDate;
 }
 function getCookie(name){
   var arr=document.cookie.split('; ');
   for(var i=;i<arr.length;i++){
     var result=arr[i].split('=');
     if(result[]==name){
       return result[];
     }
   }
   return '';
 }
 function removeCookie(name){
   setCookie(name, , -);
 }
 window.onload=function (){
   var oForm=document.getElementById('form');
   var oUser=document.getElementsByName('user')[];
   //在點(diǎn)擊提交按鈕時(shí)發(fā)生的事件
   oForm.onsubmit=function (){
     //創(chuàng)建一個(gè)cookie，值為用戶(hù)名輸入的值，天后過(guò)期
     setCookie('user', oUser.value, );
   };
   //用戶(hù)名的值為獲取cookie中的user
   oUser.value=getCookie('user');
 };
 </script>
 </head>
 <body>
 //index.html為本文檔文件名
 <form id="form" action="index.html">
   用戶(hù)名：<input type="text" name="user"><br>
   密　碼：<input type="password" name="pass"><br>
   <input type="submit" name="" value="登錄">
 </form>
 </body>
 </html>

window的六大屬性，同時(shí)它們也是對(duì)象：

document主要操作web加載的網(wǎng)頁(yè)文檔；

frames為窗口框架對(duì)象數(shù)組；

history保存用戶(hù)上網(wǎng)記錄；

location提供加載的文檔有關(guān)信息以及控制頁(yè)面跳轉(zhuǎn)；

navigator對(duì)象存儲(chǔ)瀏覽器名稱(chēng)及版本信息；

screen顯示屏幕相關(guān)信息。

其中document對(duì)象屬性下也有幾個(gè)重要的屬性對(duì)象，以document為核心的對(duì)文檔進(jìn)行操作的各個(gè)對(duì)象組成的結(jié)構(gòu)便是大家所熟悉的DOM，從這一點(diǎn)看來(lái)，DOM其實(shí)是BOM的一個(gè)子集.

window對(duì)象除了提供了旗下的六大對(duì)象屬性外，還擁有設(shè)置瀏覽器信息的一些基本屬性，主要如下