《JavaScript高級程序設(shè)計》筆記：BOM（八）

mushang 發(fā)布于2019-08-21 10:21 / 1088人閱讀

摘要：瀏覽器對象模型提供了很多對象，用于訪問瀏覽器的功能，這些功能與任何網(wǎng)頁內(nèi)容無關(guān)。對象基本上只用來表明客戶端的能力。

BOM(瀏覽器對象模型)提供了很多對象，用于訪問瀏覽器的功能，這些功能與任何網(wǎng)頁內(nèi)容無關(guān)。

window對象 全局作用域

定義全局變量與在window對象上直接定義屬性還是有一點(diǎn)差別：全局變量不能通過delete操作符刪除，而直接在window對象上的定義的屬性可以。

var age = 29;
window.color = "red";

delete window.age;
delete window.color;

console.log(window.age); //29
console.log(window.color); // undefined

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

window.top: 指定最高（最外）層的框架
window.parent:指向當(dāng)前框架的直接上層框架，在某些情況下，parent有可能等于top

窗口位置

使用下列代碼可以跨瀏覽器取得窗口左邊和上邊的位置：

var leftPos = (typeof window.screenLeft =="number" )? window.screenLeft : window.screenX;

var topPos = (typeof window.screenTop =="number") ? window.screenTop:window.screenY;

console.log(leftPos);
console.log(topPos);

窗口大小

雖然無法確定瀏覽器窗口本身的大小，但卻可以取得頁面視口的大小。

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;
    }

}

console.log(pageWidth);
console.log(pageHeight);

location對象

// 將url 修改為"http://www.wrox.com/WileyCAD/#section1"
location.hash = "#section1";

// 將url 修改為"http://www.wrox.com/WileyCAD/?q=javascript"
location.search = "?q=javascript";

// 將url 修改為"http://www.yahoo.com/WileyCAD/"
location.hostname = "www.yahoo.com";

// 將url 修改為"http://www.yahoo.com/mydir/"
location.pathname= "mydir";

// 將url 修改為"http://www.yahoo.com:8090/mydir/"
location.port= 8090;
location.reload(); // 重新加載（有可能從緩存中加載）
location.reload(true); // 重新加載（從服務(wù)器重新加載）

navigator對象 檢查插件

// 檢測插件（在IE中無效）
function hasPlugin(name){
    name = name.toLowerCase();
    for (var i=0; i-1){
            return true;
        }
    }

    return false;
}

// 檢測flash
console.log(hasPlugin("Flash"));

// 檢測IE中的插件
    function hasIEPlugin(name){
        try{
            new ActiveXObject(name);
            return true;
        }catch(ex){
            return false;
        }
    }
    
    // 檢測flash
    alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));

screen對象

javascript中有幾個對象在編程中用處不大，而screen對象就是其中之一。screen對象基本上只用來表明客戶端的能力。

history對象

history.go(-1); // 后退一頁
history.go(1); // 前進(jìn)一頁
history.go(2); // 前進(jìn)兩頁

history.back(); // 后退一步
history.forward(); //前進(jìn)一步

//確定用戶是否一開始就打開了你的頁面
if(history.length == 0) {
    // 這應(yīng)該是用戶打開窗口后的第一個頁面
}