您當前位置：首頁 > web前端 > htmlcss > js筆記--BOM編程

js筆記--BOM編程

來源：程序員人生發布時間：2016-07-29 16:07:21 閱讀次數：3094次

1.window對象

BOM的核心對象是window，它表示閱讀器的1個實例。在閱讀器中，window對象具有兩重角色。它既是通過JS訪問閱讀器窗口的1個接口，又是ECMAScript規定的Global對象。所以網頁中定義的任何1個對象，變量和函數，都以window作為其Global對象。

1.全局作用域

所有在全局作用域中聲明的變量，函數都會編程window對象的屬性和方法。但是定義全局變量和直接在window對象上定義屬性還是有區分的：全局變量不能通過delete操作符刪除，但是直接在window對象上定義的屬性可以。

var name = "zhangsan"; window.color = "red"; console.log(delete window.name);//fasle console.log(delete window.color);//true

chrome中全為true

注意：嘗試訪問未聲明的變量會拋錯，但是通過window對象查找，可以知道某給可能未聲明的變量是不是存在。

//var newValue = oldValue; 報錯 var newValue1 = window.oldValue; console.log(newValue1); //undefined

2.窗口關系及框架

如果頁面中包括框架，則每一個框架都具有自己的window對象，并且保存在frames集合中。可以通過數值索引(從0開始，左至右，上到下)，或框架名稱來訪問相應的window對象。每一個window對象都有1個name屬性，其中包括框架的名稱。

<frameset rows="160,*"> <frame src="top.html" name="topFrame"> <frameset cols="50%,50%"> <frame src="left.html" name="leftFrame"> <frame src="right.html" name="rightFrame"> </frameset> </frameset>

window.frames["topFrame"]

top.frames["topFrame"]

top對象始終指向最高(外)層的框架，也就是閱讀器窗口。

parent對象始終指向當前框架的直接上層框架。某些情況下parent可能等于top

注意：除非最高層窗口是通過window.open()打開的,否則window對象的name屬性不會包括任何值。

self對象：始終指向window;self和window對象可以互換使用。(引入self對象的目的只是與top和parent對應，不格外包括其他值)

所有上面的這些屬性都是window對象的屬性，可以通過window.parent，window.top來訪問。

注意：在使用框架的情況下，閱讀器中會存在多個Global對象。在每一個框架中定義的全局變量會自動成為框架中window對象的屬性。由于每一個window對象都包括原生類型的構造函數，因此每一個框架都有1套自己的構造函數，這些構造函數逐一對應，但其實不相等。如：top.Object不等于top.frames[0].Object。這個問題會影響到對跨框架傳遞的對象使用instanceof操作符。

3.窗口位置

IE,Safari,Opera和Chrome提供了 screenLeft和screenTop屬性。Firefox提供screenX和screenY屬性。

跨閱讀器獲得窗口左側和上邊的位置。

var leftPos = (typeof window.screenLeft == "number")?window.screenLeft:window.screenX; var topPos = (typeof window.screenTop == "number")?window.screenTop:window.screenY; console.log(leftPos+" "+topPos);

調劑窗口位置和大小

window.moveTo(0,0);//窗口移動到屏幕左上角 window.moveBy(0,100);//窗口向下移動100像素 window.resizeTo(100,100);//調劑窗口大小 window.resizeBy(100,50);//調劑到200*150

4.導航和打開窗口

var topFrame = window.open("top.html","topFrame","height=400,width=300,top=10,left=20"); console.log(topFrame); topFrame.close();

5.間歇調用和超時調用

JS是單線程語言，但允許通過設置超時時間和間歇時間來調度代碼在特定的時刻履行。前者是在指定的時間后履行代碼，后者是每隔指定時間履行1次。

var id = setTimeout(function(){ //1秒后履行 alert("hehe"); },1000); clearTimeout(id);

第2個參數表示等待多長時間的毫秒數，但經過該時間后指定的代碼不1定會履行。JS是1個單線程序的解釋器，因此1定時間內只能履行1段代碼。為了控制要履行的代碼，就有1個JavaScript任務隊列。這些任務將會依照它們添加到隊列的順序履行。setTimeout()表示指定時間后，將該任務添加到履行隊列中。如果隊列是空的，就會立刻履行；如果隊列不是空的，就要等到前面的代碼履行完了以后再履行。
方法返回1個數值ID,表示這個超時調用。可以通過它來取消超時調用。clearTimeout()方法取消超時調用。

var num = 0; var max = 10; var intervalId = null; function incrementNumber(){ num++; if(num == max){ clearInterval(intervalId); console.log("Done"); } } intervalId = setInterval(incrementNumber,500);

使用setTimeout()實現間歇調用

var num = 0; var max = 10; var intervalId = null; function incrementNumber(){ num++; if(num < max){ console.log(num); setTimeout(incrementNumber,500); }else{ console.log("done"); } } intervalId = setTimeout(incrementNumber,500);

在使用超時調用時，不需要跟蹤超時調用ID，由于每次履行代碼后，如果不再設置另外一次超時調用，調用就會停止。1般認為使用超時調用來摹擬間歇調用是1種最好模式。由于后1個間歇調用可能會在前1個間歇調用結束前啟動，為了不這個，最好不要使用間歇調用。

6.系統對話框

閱讀器通過alert(),confirm()和prompt()方法可以調用系統對話框向用戶顯示消息。系統對話框與在閱讀器中顯示的網頁沒有關系，也不包括HTML。它們的外觀由操作系統及閱讀器設置決定，而不是CSS決定。并且通過這幾個方法打開的對話框都是同步和模態的。也就是說，顯示這些對話框的時候代碼會停止履行，而關掉這些對話框后代碼又會回復履行。

var flag = confirm("are you sure?"); console.log(flag); console.log(prompt("name","zhangsan"));

prompt()如果點擊的取消或沒有點擊肯定而是通過其他方式關閉了對話框，則該方法返回null。

2.location對象

location是最有用的BOM對象之1，它提供了與當前窗口中加載的文檔有關的信息，還提供了1些導航功能。location對象是很特別的1個對象，由于它既是window對象的屬性，也是document對象的屬性；換句話說，window.location和document.location援用的是同1個對象。location對象的用途不只表現在它保存著當前文檔的信息，還表現在它將URL解析為獨立的片斷，讓開發人員可以通過不同的屬性訪問這些片斷。

hash "#contents"返回URL中的hash(#后跟零或多個字符)，如果URL中不包括散列，則返回空字符串

console.log(location.hash) console.log(location.host);//服務器名和端口號 console.log(location.hostname);//服務器名 console.log(location.href);//完全的URL，location.toString() console.log(location.pathname);//URL中的目錄和文件名 console.log(location.port);//URL中指定的端口號，如果沒有返回空字符串""。 console.log(location.protocol);//返回頁面使用的協議。http或https console.log(location.search); //返回從?到URL末尾的所有內容

1.查詢字符串參數

雖然通過上面的屬性可以訪問到location對象的大多數信息。但卻沒辦法逐一訪問其中的每一個查詢字符串參數。

function getQueryStringArgs(){ //獲得查詢參數?以后的值 var qs = location.search.length>0?location.search.substring(1):""; args = {};//參數對象 //獲得每項參數 var items = qs.length?qs.split("&"):[]; //遍歷每項 items.forEach(function(item){ if(item.length){ var keyValue = item.split("="); var name = decodeURIComponent(keyValue[0]); var value = decodeURIComponent(keyValue[1]); if(name.length){ args[name] = value; } } }); return args; } console.log(getQueryStringArgs());

2. 位置操作

使用location對象可以通過很多方式來改變閱讀器的位置。首先，也是最經常使用的方式，就是使用assign()方法并為其傳遞1個URL。

location.assign("http://www.baidu.com"); window.location = "http://www.baidu.com";//調用的location.assign() location.href = "http://www.baidu.com";

通過設置location對象的其他屬性值hash，search，hostname，pathname和port來改變URL。

修改后閱讀器歷史記錄中會生成1條新記錄，因此用戶通過單擊"后退"按鈕會導航到前1個頁面。可使用replace()方法禁用這類行動。這個方法只接受1個參數，即要導航到的URL；結果雖然會致使閱讀器位置改變，但不會在歷史記錄中生成新記錄。在調用replace()方法后，不能回到前1個頁面。

<html> <head> <title>BOM對象</title> </head> <body> hello,沒法返回! </body> <script> setTimeout(function(){ location.replace("http://www.baidu.com"); },1000); </script>

reload()方法：重新加載當前顯示的頁面。如果不傳遞任何參數，頁面就會以最有效的方式重新加載。即如果頁面自上次要求以來并沒有改變過，頁面就會從閱讀器緩存中重新加載。如果要強迫從服務器重新加載，則需要像下面這樣為該方法傳遞參數true。

location.reload(); //重新加載，有可能重閱讀器緩存中加載 location.reload(true); //重新加載(從服務器加載)

位于reload()調用以后的代碼，可能不會被履行(取決于網絡延遲或系統資源等因素)，最好將reload()放在代碼最后面。

3.navigator對象

最早由Netscape Navigator2.0引入的navigator對象，現在已成為辨認客戶端閱讀器的事實標準。navigator對象是所有支持JavaScript的閱讀器所共有的。與其他BOM對象的情況1樣，每一個閱讀器中的navigator對象也都有1套自己的屬性。

1.檢測插件

檢測閱讀器中是不是安裝了特定的插件是1種最多見的檢測例程。對非IE閱讀器可使用plugins數組來到達這個目的。數組屬性：

name：插件名

description：插件的描寫

filename：插件文件名

length：插件所處理的MIME類型數量

1般name屬性中會包括檢測插件必須的所有信息。（通過name屬性來檢測）

//檢測插件(IE中無效) function hasPlugin(name){ name = name.toLowerCase(); for(var i =0;i<navigator.plugins.length;i++){ if(navigator.plugins[i].name.toLowerCase().indexOf(name) > ⑴){ return true; } } return false; } console.log(hasPlugin("Flash")); //true console.log(hasPlugin("QuickTime"));//false

每一個插件對象本身也是1個MimeType對象的數組,這些對象可以通過方括號語法來訪問。每一個MimeType對象有4個屬性：包括MIME類型描寫的description,回指插件對象的enabledPlugin,表示與MIME類型對應的文件擴大名的字符串suffixes和表示完全MIME類型字符串的type。

4.screen對象

screen對象基本上只用來表明客戶真個能力，包括閱讀器窗口外部的顯示器的信息，如像素寬度和高度等。

window.resizeTo(screen.availWidth,screen.availHeight);

5.history對象

history對象保存這用戶上網的歷史記錄，從窗口被打開的那1刻算起。由于history是window對象的屬性，因此每一個閱讀器窗口，每一個標簽頁乃至每一個框架，都有自己的history對象與特定的window對象關聯。出于安全方面的斟酌，開發人員沒法得知用戶閱讀過的URL。不過，借由用戶訪問過的頁面列表，可以實現后退和前進。

go()：實現用戶在歷史記錄中任意跳轉。

//后退1頁 history.go(⑴); //前進1頁 history.go(1); //前進兩頁 history.go(2);