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/