Javascript BOM學(xué)習(xí)小結(jié)(六)
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)文章
使用JavaScript觸發(fā)過(guò)渡效果的方法
hover 和 :focus 這樣的偽類(lèi),我們可以很方便的將元素從一個(gè)樣式切換到另一個(gè)樣式,而且切換是會(huì)有過(guò)渡效果。但有時(shí)我們想要使用 js 來(lái)驅(qū)動(dòng)過(guò)渡(即在代碼中觸發(fā)過(guò)渡)也是可以實(shí)現(xiàn)的,下面通過(guò)本文給大家介紹下2017-01-01詳解微信小程序 頁(yè)面跳轉(zhuǎn) 傳遞參數(shù)
這篇文章主要介紹了詳解微信小程序 頁(yè)面跳轉(zhuǎn) 傳遞參數(shù),現(xiàn)在分享給大家,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-12-12KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流foreach綁定
這篇文章主要介紹了KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流foreach綁定的相關(guān)資料,需要的朋友可以參考下2016-10-10layui表單驗(yàn)證select下拉框?qū)崿F(xiàn)驗(yàn)證的方法
今天小編就為大家分享一篇layui表單驗(yàn)證select下拉框?qū)崿F(xiàn)驗(yàn)證的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09javascript解析xml實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的方法
這篇文章主要介紹了javascript解析xml實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的方法,涉及javascript針對(duì)節(jié)點(diǎn)的操作與XML文件解析的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07使用JS輕松實(shí)現(xiàn)ionic調(diào)用鍵盤(pán)搜索功能(超實(shí)用)
這篇文章主要介紹了使用JS輕松實(shí)現(xiàn)ionic調(diào)用鍵盤(pán)搜索功能(超實(shí)用)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09JavaScript根據(jù)CSS的Media Queries來(lái)判斷瀏覽設(shè)備的方法
這篇文章主要介紹了JavaScript根據(jù)CSS的Media Queries來(lái)判斷瀏覽設(shè)備的方法,主要思路是通過(guò)CSS Media Queries改變一個(gè)類(lèi)的某個(gè)屬性值(例如 z-index),然后用JavaScript讀取判斷,需要的朋友可以參考下2016-05-05javascript 變態(tài)的節(jié)點(diǎn)集合
今天想實(shí)現(xiàn)jQuery的unwrap效果,換言之,就是用其孩子把其父節(jié)點(diǎn)干掉。為了效率,用到文檔碎片,而取孩子時(shí)使用到childNodes(返回一個(gè)nodeList)2010-03-03利用JS判斷字符串是否含有數(shù)字與特殊字符的方法小結(jié)
在我們?nèi)粘9ぷ鞯臅r(shí)候,利用javaScript判斷一個(gè)字符串中是否包括有數(shù)字和"-",在一些表單提交的地方,這是比較有用的常規(guī)判斷,這里收集有幾種不同的方法,最后還將簡(jiǎn)要介紹下isNAN函數(shù)的使用方法和例子,有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2016-11-11