💖通过看视频教程和红宝书浅浅的写下一些关于BOM的笔记
红宝书知识系统全面，精炼。大概是因为太干货了，涉及的知识点太多，所以我选择看着简单的视频教程，同时打开红宝书。笔记的内容以红宝书为基准。
window对象
BOM的核心是window对象，表示浏览器的实例。
导航与打开新窗口
window.open（）方法
可以用来导航到指定的url或用于打开新的浏览器窗口。
<body>
<script>
window.onload = function () {
var btn = document.getElementById("btn");
btn.onclick = function () {
window.open('http://www.4399.com');
window.open('http://www.4399.com', '_self');
window.open('http:/www.4399.com/', '_blank', 'width=200,height=300,left=100,top=300');
};
};
</script>
<input type="button" id="btn" value="打开新窗口">
</body>open方法接收4个参数：要加载的URL，目标窗口，特性字符串，表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。
通常调用这个方法只传前三个参数，最后一个参数只有在不打开新窗口的时候才使用。
特性字符串用于指定新窗口的配置，如果没有，则新窗口会带有所有浏览器的默认特性。
特性字符串的一些选项
尝试一下
window.open('http:/www.4399.com', '_blank', '我是4399');点击按钮，新窗口打开页面，_blank失效了，所以给窗口命名的“我是4399”也无效。
window.close（）方法
关闭页面
不同浏览器中的表现形式不一样
在ff/0情况下，只允许关闭由window.open方法打开的窗口
<body>
<script>
window.onload = function () {
var open = document.getElementById("open");
var close = document.getElementById("close");
open.onclick = function () {
window.open('http://www.4399.com', '_blank');
};
close.onclick = function () {
window.close();
}
};
</script>
<input type="button" id="open" value="打开新窗口">
<input type="button" id="close" value="关闭页面">
</body>上述代码点击打开页面会在新窗口打开页面，关闭页面会关闭含有button的原始页面。
userAgent
window.navigator
window.navigator.userAgent
用户代理信息
操作系统，浏览器内核，浏览器版本等等
<script>
window.onload = function () {
console.log(window.navigator.userAgent);
console.log(window.navigator);
};
</script>
window.location
地址栏信息（字符串）
window.location.search
地址栏查询信息（问号到＃号之间的所有内容，包含问号不包含井号）
window.location.hash
锚点信息（#号后所有内容包含#）
window.location.href
获取当前页面的 URL
BOM相关的尺寸
可视区的尺寸
这里截图一下之前的笔记片段，可视区宽高使用DOM
可视区的宽高（BOM）
window.innerWidth
window.innerHeight
不兼容低版本的浏览器
<script>
window.onload = function () {
console.log(window.innerHeight, window.innerWidth);
console.log(document.documentElement.clientHeight, document.documentElement.clientWidth);
};
</script>
滚动条的距离
| DOM | |
|---|---|
| chrom | document.body.scrollTop |
| 其它 | document.documentElement.scrollTop |
| BOM | |
| window.pageXOffset/window.pageYOffset | |
设置滚动条的距离
window.scrollTop(x,y)
全兼容，两个参数必须同时出现
window.scrollTo( 0, 1000 );
// 设置滚动行为改为平滑的滚动
window.scrollTo({
top: 1000,
behavior: "smooth"
});
在vscode中输入查看页面及控制台，无任何输出。
滚动行为也可以通过定时器实现
window.onload功能函数中使用定时器
var t = window.pageYOffset;
var time = setInterval(function () {
t -= 100;
window.scrollTo(0, t);
}, 16);内容的高度
元素.scrollHeight
<style>
#div1 {
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #f00;
}
#div2 {
height: 200px;
background-color: blue;
}
</style><body>
<script>
window.onload = function () {
var div1 = document.getElementById("div1");
document.onclick = function () {
console.log('offsetHeight', div1.offsetHeight);
console.log('clientHeight', div1.clientHeight);
console.log('scrollHeiht', div1.scrollHeight);
};
};
</script>
<div id="div1">
<div id="div2"></div>
</div>
</body>
返回元素包含边框的高度，返回元素不包含边框的高度，返回元素的内容的高度
因为元素溢出容器所以内容的高度是200+10padding
注意：
- 如果内容没有溢出容器，内容的高度会返回容器的不含边框的高度clientHeight。
在上述代码中如果div2的高度改为20px，它会在容器内部没有溢出，打印内容的高度（ scrollHeight）会返回（clientHeight）
- 取body的内容宽度会出现兼容性问题，可能不是真实值。
document.body.scrollHeight
- 为了避免出现兼容性问题，可以取文档的高度
document.body.offsetHeight
DOM事件
window.onscroll()
当滚动条滚动时触发这个方法
window.onresize()
当窗口改变大小的时候会触发这个方法
会按照一定的频率触发这些方法，频率由浏览器决定。
<style>
#div1 {
width: 100px;
height: 100px;
background-color: red;
font: 20px/100px "楷体";
color: #fff;
text-align: center;
position: fixed;
right: 0;
bottom: 0;
display: none;
}
</style>
<script>
window.onload = function () {
var div = document.getElementById("div1");
window.onscroll = function () {
var t = window.pageYOffset;//获取滚动条的位置
if (t > 200) {
div1.style.display = 'block';
} else {
div1.style.display = 'none';
}
div.onclick = function () {
window.onscroll(0, 0);
};
};
};
</script>
</head>
<body style="height: 3000px;">
<div id="div1">回到顶部</div>
</body>上述代码可以简单的实现一个回到顶部的功能，现实中就像是哔哩哔哩的视频网页观看时去看评论，视频会形成一个小小窗口悬浮，回到顶部小窗口就会消失。
![[附源码]Python计算机毕业设计公交电子站牌管理系统软件Django（程序+LW）](https://img-blog.csdnimg.cn/1fa9497bebf54445a1096d14b4f4cfde.png)
