javascript--BOM

explorer_ddf 發(fā)布于2019-08-23 14:25 / 1474人閱讀

摘要：對(duì)象的和新對(duì)象是它表示瀏覽器的一個(gè)實(shí)例。在瀏覽器中，對(duì)象有雙重角色，它即是通過訪問瀏覽器窗口的接口，又是規(guī)定的對(duì)象。如果不存在在中，則取得和的值。

window對(duì)象

BOM的和新對(duì)象是window,它表示瀏覽器的一個(gè)實(shí)例。在瀏覽器中，window對(duì)象有雙重角色，它即是通過javascript訪問瀏覽器窗口的接口，又是ECMAScript 規(guī)定的 Global 對(duì)象。著意味著在網(wǎng)頁(yè)中定義的任何一個(gè)對(duì)象、變量和函數(shù)，都以window作為其Global對(duì)象，因此有訪問parseInt()等方法。

全局作用域
由于 window 對(duì)象同時(shí)扮演著 ECMAScript中 Global 對(duì)象的角色，因此所有在全局作用域中聲明的變量、函數(shù)都會(huì)變成 window 對(duì)象的屬性和方法

var age = 29;
function sayAge(){
alert(this.age);
}
alert(window.age); //29
sayAge(); //29
window.sayAge(); //29

我們?cè)谌肿饔糜蛑卸x了一個(gè)變量 age 和一個(gè)函數(shù) sayAge() ，它們被自動(dòng)歸在了 window 對(duì)象名下。于，可以通過 window.age 訪問變量 age，可以通過 window.sayAge() 訪問函數(shù) sayAge()由于 sayAge() 存在于全局作用域中，因此 this.age 被window.age ，最終顯示的仍然是正確的結(jié)果。
拋開全局變量會(huì)成為 window 對(duì)象的屬性不談，定義全局變量與window 對(duì)象上直接定義屬性還是有一點(diǎn)差別：全局變量不能通過 delete 操作符刪除，而直接在 window 對(duì)象上的定義的屬性可以。

var age = 29;
window.color = "red";
//在 IE < 9 時(shí)拋出錯(cuò)誤，在其他所有瀏覽器中都返回 false
delete window.age;
//在 IE < 9 時(shí)拋出錯(cuò)誤，在其他所有瀏覽器中都返回 true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined

另外，還要記住一件事：嘗試訪問未聲明的變量會(huì)拋出錯(cuò)誤，但是通過查詢 window 對(duì)象，可以知道某個(gè)可能未聲明的變量是否存在。

//這里會(huì)拋出錯(cuò)誤，因?yàn)?oldValue 未定義
var newValue = oldValue;
//這里不會(huì)拋出錯(cuò)誤，因?yàn)檫@是一次屬性查詢
//newValue 的值是 undefined
var newValue = window.oldValue;

本章后面將要討論的很多全局 JavaScript 對(duì)象（如 location 和 navigator ）實(shí)際上都是 window對(duì)象的屬性。

窗口關(guān)系及框架

如果頁(yè)面中包含框架，則每個(gè)框架都擁有自己的 window 對(duì)象，并且保存在 frames 集合中。在 frames集合中，可以通過數(shù)值索引（從 0 開始，從左至右，從上到下）或者框架名稱來(lái)訪問相應(yīng)的 window 對(duì)象。每個(gè) window 對(duì)象都有一個(gè) name 屬性，其中包含框架的名稱.

窗口位置

window.screenLeft : window.screenX;

var topPos = (typeof window.screenTop == "number") ?    window.screenTop : window.screenY;
```
這個(gè)例子運(yùn)用三元操作符首先確定 screenLeft 和 screenTop 屬性是否存在，如果是（在 IE、Safari、Opera 和 Chrome 中），則取得這兩個(gè)屬性的值。如果不存在（在 Firefox 中），則取得screenX和 screenY 的值。

窗口大小

    var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
    if (typeof pageWidth != "number"){
    if (document.compatMode == "CSS1Compat"){
    pageWidth = document.documentElement.clientWidth;
    pageHeight = document.documentElement.clientHeight;
    } else {
    pageWidth = document.body.clientWidth;
    pageHeight = document.body.clientHeight;
    }
    }

導(dǎo)航和打開窗口
彈出窗口window.open()
安全限制

系統(tǒng)對(duì)話框

location對(duì)象

查詢字符串參數(shù)

function getQueryStringArg () {
    var qs = (window.location.search.length > 0 ? location.search.substring(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;
}

位置操作

history對(duì)象

//后退一頁(yè)
history.go(-1);
//前進(jìn)一頁(yè)
history.go(1);
//前進(jìn)兩頁(yè)
history.go(2);
//后退一頁(yè)
history.back();
//前進(jìn)一頁(yè)
history.forward()
if (history.length == 0){
//這應(yīng)該是用戶打開窗口后的第一個(gè)頁(yè)面
}