$8 BOM(瀏覽器對象模型)

瀏覽器對象模型是以window對象為依托的,window在ES中是全局對象,因而所有的全局變量和函數都是它的屬性,并且所有的原生的構造函數也都在它的命名空間下。

1. window對象:

A. BOM的核心對象;

同時扮演著全局對象的角色。
全局變量與window對象上定義的屬性區別:全局變量不能通過delete刪除

    var age=29;
    window.color="red";
    delete window.age;
    delete window.color;
    console.log(age);//29
    console.log(window.color); //undefined
B. 窗口位置

a.窗口相對于屏幕左邊和上邊的位置:

screenLeft, screenTop; //IE Safari Opera Chrome
screenX, screenY; //Safari Chrome Firefox 
var leftPos=(typeof  window.screenLeft == "number")? window.screenLeft : window.screenX;
var topPos=(typeof window.screenTop == "number")? window.screenTop : window.screenY;

b.窗口精確地移動到某個位置:

window.moveBy(0,100) //移動了
window.moveTo(0,100) //移動到
C. 窗口大小:

a.跨瀏覽器確定窗口大小不是一件簡單的事情,因為瀏覽器的原因,但是可以確定頁面視口的大小(去掉邊框):

var pageWidth=window.innerWidth;
var pageHight=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;
        }
}

b.調整窗口大小:

window.resizeTo(100,100);
window.resizeBy(100,100);
D. 導航和打開窗口:
window.open()   //打開一個新的瀏覽器窗口
E. 間歇調用setInterval和超時調用setTimeout

a.超時調用:每個超時調用都有一個唯一的數值ID,可以通過該ID來取消超時調用。

    var timeoutId = setTimeout(function(){
        alert("hello");
    },1000);

取消clearTimeout(timeoutId)//在指定的時間尚未過去之前取消超時調用,會導致setTimeout里面的function代碼沒有執行。

b.間歇調用:直到間歇調用被取消或者頁面卸載才會停止。該方法也有其ID。

var num =0;
var max = 10;
var intervalId = null;
    
function incrementNumber(){
        num++;  
        if(num == max){
            clearInterval(intervalId);
        }
        else{
            console.log(num);     //1-9
        }
    }
intervalId = setInterval(incrementNumber,1000)

很少真正使用間歇調用,可以使用超時調用來模擬間歇調用,間歇調用缺點:
1.后一個間歇調用有可能會在前一個間歇調用結束之前啟動;
2.間歇調用需要追蹤其ID,以便于取消間歇調用。

var num =0;
var max = 10;
var intervalId = null;  
function incrementNumber(){
        num++;
    //如果執行次數未達到設定的值,則設置另一次超時調用
        if(num < max){
            console.log(num);
            setTimeout(incrementNumber,1000);
        }
}   
intervalId = setTimeout(incrementNumber,1000);
F. 系統對話框:

1.alert() (用戶無法控制的對話框,警告作用)
2.confirm() (用戶可以選擇是否執行操作)

    if(confirm("你確定進入下一頁嗎?")){
        alert("歡迎")
    }
    else{
        alert("再見")
    }
Paste_Image.png

3.prompt() (用戶可以輸入文本)

    var result=prompt("你叫什么名字?","");
    if(result != null){
        alert("歡迎,"+result);
    }
Paste_Image.png

2. location對象

a. location對象提供了當前頁面的與文檔有關的信息。它既是window的屬性,又是document的屬性,即window.location==document.location.

b. 作用:解析Url,將Url解析為獨立的片段。可以通過location的不同屬性訪問url中的不同信息(hash host hostname href pathname port protocol search)

c.獲取url中的參數:

    function getQueryStringArgs() {
        var qs=location.search.length>0? location.search.substring(1):"";
        var args={};
        var items=qs.length ? qs.split("&"):[];
        var item=null,name=null,value=null;
        for(var i=0;i<items.length;i++){
            item=items[i].split("=");
            name=decodeURIComponent(item[0]);
            value=decodeURIComponent(item[1]);
            if(name.length){
                args[name]=value;
            }
        }
        return args;
    }

d. 位置操作:
打開新的URL地址并且在瀏覽器的歷史記錄中生成記錄(可后退)

    location.
    window.location="http://baidu.com"
    location.assign("http://baidu.com")

打開新的URL并且不生成記錄(不可后退)

    location.replace("http://baidu.com")

重新加載頁面:reload

    location.reload()     //有可能加載瀏覽器緩存頁面
    location.reload(true)  //重新從服務器進行請求

3. navigator對象

主要作用:識別客戶端瀏覽器
a. 檢測插件:plugins數組中包含插件的各種信息。

        //非ie瀏覽器有效,因為navigator是NS開發的,IE不支持。
        function hasPlugin(name) {
            name=name.toLowerCase();
            for(var i=0;i<navigator.plugins.length;i++){
                if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
                    return true;
                }
            }
            return false;
        }
        console.log(hasPlugin("flash"));

ie瀏覽器需要利用COM對象來進行檢測。

4. screen對象

主要用于表示瀏覽器窗口信息。比如調整窗口大小時:

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

5. history對象:

保存上網的歷史記錄。
作用:創建前進后退按鈕,以及檢測當前頁面是否是用戶打開的第一個頁面。
常見用法:

        history.go(1);
        history.go(-1);
        history.forward();
        history.back();
        history.go("wrox.com");
        if(history.length==0){
            console.log("用戶訪問的第一個頁面")
        }
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容