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/