BOM中window对象的属性qq39155611的博客-

BOM中window对象的属性

这篇博客主要介绍一下BOM中的window对象的属性。

HTML代码：

 <a href="https://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("https://www.baidu.com","newWindow","width=300,height=300"); //     console.log(newWindow.name); // } // closed 返回窗口是否已被关闭。 // document.οnclick=function(){ //     newWindow=window.open("https://www.baidu.com","newWindow","width=300,height=300"); //     console.log(newWindow.closed); // } // opener 返回对创建此窗口的窗口的引用。     document.onclick = function() {         newWindow = window.open("https://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/