欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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è)置瀏覽器信息的一些基本屬性,主要如下

相關(guān)文章

最新評(píng)論