BOM中window对象的属性
这篇博客主要介绍一下BOM中的window对象的属性。
HTML代码：
<ahref="http://www.baidu.com">百度一下</a><iframesrc=""frameborder="1"id="frame1"name="frame_1"></iframe><iframesrc=""frameborder="1"name="frame_2"></iframe><iframesrc=""frameborder="1"name="frame_3"></iframe><iframesrc=""frameborder="1"name="frame_4"></iframe><divid="wrap"><divid="box"></div></div><divclass="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);
