BOM中window對象的屬性

這篇部落客要介紹一下BOM中的window對象的屬性。

HTML代碼：

<a href="http://www.baidu.com">百度一下</a>
    <iframe src="" frameborder="1" id="frame1" name="frame_1"></iframe>
    <iframe src="" frameborder="1" name="frame_2"></iframe>
    <iframe src="" frameborder="1" name="frame_3"></iframe>
    <iframe src="" frameborder="1" name="frame_4"></iframe>
    <div id="wrap">
        <div id="box"></div>
    </div>
    <div class="box"></div>
           

CSS代碼：

.box {
            width: 10000px;
            height: 10000px;
        }
        
        #wrap {
            width: 400px;
            height: 400px;
            background: green;
            position: relative;
        }
        
        #box {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            top: 10px;
            left: 10px;
        }
           

1.屬性值為對象

// 屬性值為對象
    // history	對 History 對象的隻讀引用。
    console.log(window.history);
    // location	用于視窗或架構的 Location 對象。
    console.log(window.location);
    // navigator	對 Navigator 對象的隻讀引用。
    console.log(window.navigator);
    // screen	對 Screen 對象的隻讀引用。
    console.log(window.screen);
    // document	對 Document 對象的隻讀引用。
    console.log(window.document);
           

2.寬高相關的屬性

// 寬高屬性
    // innerHeight	傳回視窗的文檔顯示區的高度。
    // innerWidth	傳回視窗的文檔顯示區的寬度。
    console.log(window.innerHeight, window.innerWidth);
    // outerHeight	傳回視窗的外部高度，包含工具條與滾動條。
    // outerWidth	傳回視窗的外部寬度，包含工具條與滾動條。
    console.log(window.outerHeight, window.outerWidth);
    // clientHeight  傳回浏覽器視窗的高   相容IE8一以下浏覽器
    // clientWidth  傳回浏覽器視窗的寬
    console.log(document.body.clientHeight, document.body.clientWidth);
    console.log(document.documentElement.clientHeight, document.documentElement.clientWidth);
           

3.坐标相關的屬性

// pageXOffset	設定或傳回目前頁面相對于視窗顯示區左上角的 X 位置。
    // pageYOffset	設定或傳回目前頁面相對于視窗顯示區左上角的 Y 位置。
    console.log(window.pageXOffset, window.pageYOffset);
    // screenLeft	傳回相對于螢幕視窗的x坐标
    // screenTop	傳回相對于螢幕視窗的y坐标
    console.log(window.screenLeft, window.screenTop);
    // screenX	傳回相對于螢幕視窗的x坐标
    // screenY	傳回相對于螢幕視窗的y坐标
    console.log(window.screenX, window.screenY);
           

4.視窗/架構相關的屬性

// 如何擷取架構中的元素  contentWindow   contentDocumnet
    console.log(document.getElementById("frame1").contentWindow);


    // self	傳回對目前視窗的引用。等價于 Window 屬性。
    console.log(window.self);

    // top	傳回最頂層的父視窗。
    console.log(window.top);
    console.log(document.getElementById("frame1").contentWindow.top);
    // parent	傳回父視窗。
    console.log(window.parent);
    console.log(document.getElementById("frame1").contentWindow.parent);

    // length	設定或傳回視窗中的架構數量。
    console.log(window.length);
    // frames	傳回視窗中所有命名的架構。該集合是 Window 對象的數組，每個 Window 對象在視窗中含有一個架構。
    console.log(window.frames);
    // name	設定或傳回視窗的名稱。
    console.log(window.name);
    console.log(document.getElementById("frame1").contentWindow.name);

    // document.οnclick=function(){
    //     newWindow=window.open("http://www.baidu.com","newWindow","width=300,height=300");
    //     console.log(newWindow.name);
    // }


    // closed	傳回視窗是否已被關閉。
    // document.οnclick=function(){
    //     newWindow=window.open("http://www.baidu.com","newWindow","width=300,height=300");
    //     console.log(newWindow.closed);
    // }

    // opener	傳回對建立此視窗的視窗的引用。
    document.onclick = function() {
        newWindow = window.open("http://www.baidu.com", "newWindow", "width=300,height=300");
        console.log(newWindow.opener);
    }

           

5.緩存相關的屬性

// localStorage	在浏覽器中存儲 key/value 對。沒有過期時間。
    // sessionStorage	在浏覽器中存儲 key/value 對。 在關閉視窗或标簽頁之後将會删除這些資料。   會話緩存
    window.sessionStorage.setItem("name","張三");
           

6.補充知識點

// offsetTop offsetLeft 被操作的元素相對于第一個有定位屬性的祖先元素的偏移  沒有則相對于body
    var oWrap = document.getElementById("wrap");
    var oBox = document.getElementById("box");
    console.log(oBox.offsetLeft, oBox.offsetTop);
    // offsetParent  第一個具有定位屬性的祖先元素  沒有的話  傳回body 
    console.log(oBox.offsetParent);
           

視訊講解連結：

https://www.bilibili.com/video/BV1Kv41167Gr/