BOM瀏覽器對象模型

時間 2019-11-12

標籤 bom 瀏覽器對象模型欄目瀏覽器简体版

原文原文鏈接

訪問和操做瀏覽器窗口的模型稱爲瀏覽器對象模型BOM（Browser Object Model）。html

BOM總體對象圖。數組

核心是window對象；瀏覽器

如下有特殊雙重身份：緩存

window對象既是ECMAScript規範中的Global對象，也是BOM中的頂級對象；服務器

document對象既是BOM頂級對象的一個屬性，也是DOM模型中的頂級對象框架

location對象既是window對象的屬性，同時也是document對象的屬性。函數

1. window對象 （從兩個方面看待：ECMAScript規範中的Global對象，也是BOM中的頂級對象）工具

1.1 window做爲ECMAScript中的Global對象this

1_引用window對象的屬性和方法時，能夠省略window。（就像Globle對象同樣）編碼

2_在全局做用域中this和window指向同一個對象，另外，還可使用self來引用window對象，全等關係即：this===window===self。

3_在全局做用域中定義的變量和函數也會成爲window對象的屬性和方法，可是和直接在window對象上定義屬性仍是有區別：

　　a、全局變量不能使用delete刪除（至關於給window定義屬性時將屬性特性[[Configurable]]賦值爲false了），

直接在window對象上定義的屬性可使用delete刪除（直接定義window對象時屬性特性[[Configurable]]賦值默認爲true）。

若是同時定義了全局變量和window對象的屬性，則刪除window屬性時不起做用。

　　b、嘗試訪問未定義的全局變量會拋出異常，可是訪問未定義的window對象的屬性則只是返回undefined。(這裏能夠很好地利用此特性進行檢測兼容性）

var name = 'Games';                               //全局做用域中定義的變量和函數會成爲window對象的屬性和方法，可是不能使用delete刪除
function getName(){ return this.name; } console.info(window.name); // Games
console.info(window.getName());                  // Games
console.info(this == window);                    // true
console.info(this == self);                      // true
console.info(window == self);                    // true

window.name = 'Kobe';                            //直接在window對象上定義屬性，會同時修改全局變量的值，相反，修改全局變量的值，window對象的屬性值也會修改
console.info(name); delete window.name;                              //既定義了全局變量，又在window對象上定義了屬性，刪除時雖然沒有報錯，可是並無起做用
console.info(name);                              //Kobe
console.info(window.name);                       //Kobe

window.team = 'cavs';                            //直接在window對象上定義屬性，可使用delete刪除
console.info(window.team); delete window.color; console.info(window.color); //undefined

1.2 window做爲BOM中的頂級對象

1.2.1 瀏覽器整個窗口與框架

沒有子框架時：window、self、top和parent都相等，都是指最頂層框架，即瀏覽器窗口。

有子框架時：window、self 和 top 都爲最頂層框架，parent指向當前框架的直接上層框架.

若是頁面中包含框架，則每一個框架都有本身的window對象，而且保存在父窗口的frames集合中.

能夠經過索引（從0開始，從左至右，從上至下）或者框架名稱name屬性訪問相應的window對象。每一個window對象都有一個name屬性，表示所處框架的名稱。

//下面是一個包括框架的頁面<html>
<head>
    <title>Window</title>
</head>
<frameset rows="160,*">
    <frame src="frame.htm" name="topFrame">
    <frameset cols="50%,50%">
        <frame src="leftrframe.htm" name="leftFrame">
        <frame src="rightrframe.htm" name="rightFrame">
    </frameset>
</frameset>
</html>

1.2.2 window做爲頂層對象的主要方法:

	方法名	說明
打開新窗口	open()	返回新打開窗口的引用，利用該引用能夠繼續操做該新窗口

窗口移動到的位置	moveTo(x,y)	x和y表示新位置的x和y座標值只適用於最外層window對象
窗口移動的尺寸	moveBy(x,y)	x和y表示在水平和垂直方向上移動的像素數只適用於最外層window對象

窗口寬高尺寸	resizeTo(x,y)	x和y表示瀏覽器窗口的新寬度和新高度只適用於最外層window對象
窗口寬高變化尺寸	resizeBy(x,y)	x和y表示瀏覽器窗口的寬高變化尺寸只適用於最外層window對象

提示框	alert()	提示框-顯示時包含傳入的字符串和「肯定」按鈕
確認框	confirm()	確認框-點擊「確認」返回true，點擊「取消」返回false
文本輸入框	prompt()	「確認」按鈕（返回文本輸入域的內容）、「取消」按鈕（返回null）和文本輸入域。
搜索對話框	find()	等同使用瀏覽器菜單欄的「查找」命令打開對話框
打印對話框	print()	等同使用瀏覽器菜單欄的「打印」命令打開對話框

定時器只執行一次	setTimeOut()	參數爲：執行函數或代碼、執行代碼前須要等待的時間（毫秒）
取消一次定時器	clearTimeOut()	參數爲setTimeout()的引用
循環執行	setInterval()	參數爲：執行函數或代碼、循環執行代碼的間隔時間（毫秒）
取消循環執行	clearInterval()	參數爲setInterval()的引用

兼容性：表示窗口位置的屬性有screenLeft、screenTop、screenX、screenY、表示窗口大小的屬性有innerWidth、innerHeight、outerWidth、outerHeight，可是它們的具體含義和不一樣的瀏覽器密切相關。在處理瀏覽器差別性建議使用JS框架。

2. history對象

history對象保存着從窗口被打開起的歷史記錄，每一個瀏覽器窗口、標籤頁、框架都有本身的history對象。

history對象的主要屬性和方法有：

屬性或方法	說明	例子
length	歷史記錄的數量	判斷爲第一個窗口：if(history.length == 0)
go()	0表示刷新頁面	history.go(0);
	負數表示向後跳轉	history.go(-1);
	正數表示向前跳轉	history.go(1);
	字符串參數，表示跳轉到歷史記錄中包含該字符串的最近一個位置（可能前進，也可能後退）	history.go(' nba ');
back()	後退一頁，可模仿瀏覽器「後退」按鈕	history.back();至關於history.go(-1);
forward()	前進一頁，可模仿瀏覽器「前進」按鈕	history.forward();至關於history.go(1);

3. location對象

location對象提供了與當前窗口中加載的文檔有關的信息以及一些導航功能;

它既是window對象的屬性，同時也是document對象的屬性.

主要屬性有：

屬性	例如	說明
href	http://www.nba.com	返回當前完整的URL地址==location.toString()
host	www.nba.com:80	返回服務器名稱和端口號
hostname	www.nba.com	返回服務器名稱
port	8080	返回URL中指定的端口號,若是沒有,返回空字符串
pathname	/games/2015	返回URL中的目錄和文件名
protocol	http:	返回頁面使用的協議，一般是http:或https:

主要方法有：

方法	例如	說明
search	？username=Games	返回URL的查詢字符串，這個字符串以問號開頭
assign()	location.assign(url)	當即打開新URL並在瀏覽器歷史中生成一條記錄，至關於直接設置location.href值，也能夠修改location對象的其它屬性來從新加載
replace()	location.replace(url)	打開新URL，可是不會生成歷史記錄，使用replace()以後，用戶不能經過「後退」回到前一個頁面
reload()	location.reload([true])	從新加載當前頁面，不傳遞參數時會以最有效方式加載（可能從緩存中加載），傳入true時，則強制從瀏覽器從新加載

經常使用狀況，將url後面參數鍵值對分別添加到對象中保存。例如url?username=Games&age=31,取出args[「username」]=」Games」,args[‘age’]=31;

function getQueryStringArgs(){
           //用逗號隔開可用var進行多個變量聲明
            var qs = (location.search.length > 0 ? location.search.slice(1) : ""),     //若是？後無數據，則返回空數組，而且去掉查詢字符串前面的問號
                args = {},                                                             //空對象用於接收數據
                items = qs.length ? qs.split("&") : [],                                //將參數以&分隔
                item = null,
                name = null,
                value = null,
                i = 0,
                len = items.length;
            
            for (i=0; i < len; i++){                                                 //循環處理，將每個參數的名稱和值加入到參數對象中
                item = items[i].split("=");                                            //經過等號分割，返回數組
                name = decodeURIComponent(item[0]);                                    //進行編碼處理
                value = decodeURIComponent(item[1]);
                
                if (name.length){
                    args[name] = value;                                              //鍵值對匹配添加到對象中
                }
            }
            
            return args;
        }
 
        var args = getQueryStringArgs();                                             //假定查詢字符串返回?username=Gamest&age=31        
        console.info(args["usename"]);                                               //"Gamest"
        console.info(args["num"]);                                                   //"10"

4. navigator對象

navigator對象用來描述瀏覽器自己，包括瀏覽器的名稱、版本、語言、系統平臺、用戶特性字符串等信息.

可是各個瀏覽器及瀏覽器的不一樣版本之間對這個對象的實現也不盡相同.

特性檢測：

不建議直接使用navigator的方法或屬性進行檢測瀏覽器版本，在使用特定方法時，若是擔憂兼容性，則可使用特性檢測。

function getElement(id){
    if(document.getElementById){                       //特性檢測，若是支持，優先使用document.getElementById()
        return document.getElementById(id);    
    }else
    {
        return document.all[id];                       //若是不支持getElementById方法則返回document.all
    }
}

特性檢測並不老是能湊效,

5. screen對象

screen對象用來代表客戶端顯示器的能力。多用於測定客戶端能力的站點跟蹤工具中。

包括瀏覽器窗口外部的顯示器的信息，如像素寬度和高度等，每一個瀏覽器中的screen對象都包含着各不相同的屬性。

其中五大瀏覽器都支持的屬性有：

屬性	說明
height	屏幕的像素高度
width	屏幕的像素寬度
availHeight	屏幕的像素高度減系統部件高度以後的值
availWidth	屏幕的像素寬度減系統部件寬度以後的值

　實例：調整瀏覽器窗口的大小，使其佔據屏幕的可用空間

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

6. document對象

document對象既是BOM頂級對象的一個屬性，更是DOM模型中的頂級對象，在DOM中一塊兒總結。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。