文章目录
- BOM
-
- 总体
- window
-
- 关闭页面
- history
-
- 前进 & 后退
- location
-
- 跳转
- 协值跳转
- 表单提交*
- 刷新
- screen
-
- 获取宽高
BOM
总体
- BOM是浏览器对象模型
【前端15_JS_BOM】表单提交*，携值跳转，获取屏幕宽高，前进后退，刷新页面BOM
window
关闭页面
关键字
window.close()
var btn = document.querySelector("button");
btn.onclick = function () {
window.close();
}
history
前进 & 后退
默认是0，可以添加整数，正数表示前进多少页，负数表示后退多少页
window.history.forward();
window.history.back();
window.history.go();
location
跳转
-
assign
-
replace
var btn = document.querySelector("button");
btn.onclick = function (){
window.location.assign("https://www.bilibili.com/");
/*window.location.replace("https://www.bilibili.com/");*/
};
协值跳转
- 比方说我有A页面，现在我要跳转到B页面
// 在a页面写下路径
window.location.href = 'http://127.0.0.1:8848/vueStudy/05-25/B.html?' + '要传递的值'
在b页面上获取到url并分割url获得传递过来的参数
// 在b页面上写这个
window.location.href.split('?')[1]
表单提交*
<body>
<!-- a页面 -->
<form action="b.html" method="get">
<input type="text" name="wangxiaoming"/>
<input type="submit" value="提交">
</form>
</body>
// b页面
<script>
console.log(window.location.href.split('?')[1]);
</script>
刷新
如果参数是 true ，那么就不走缓存
screen
获取宽高
window.screen.width;
console.log("window.screen.availHeight:" + window.screen.availHeight);
console.log("window.screen.availWidth:" + window.screen.availWidth);
![JavaScript操作BOM[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)