BOM知识点

2301_76440312

已于 2023-03-02 12:21:37 修改

阅读量92

点赞数

文章标签： javascript 前端 html

于 2023-03-01 20:07:37 首次发布

本文链接：https://blog.csdn.net/2301_76440312/article/details/129278825

版权

本文介绍了JavaScript中与窗口尺寸、弹出层、地址信息、页面加载、窗口大小变化、滚动条检测相关的函数和事件处理，包括onload、resize和scroll事件。同时，讨论了兼容性问题，如scrollTop的处理，以及如何使用localStorage进行本地数据存储。还涉及了页面跳转、新开标签页和关闭标签页的操作，以及历史记录管理和本地存储的使用方法。

摘要由CSDN通过智能技术生成

请添加图片描述

可视窗口尺寸

窗口尺寸包含轮动条。
<script>
    console.log(window.innerHeight,innerHeight);
    console.log(window.innerWidth,innerWidth);
</script>

弹出层

弹出层会阻塞后面代码运行，点掉之后才会继续运行。

	提示框 alert  、询问框confirm、输入框 prompt	
	不常用 不同浏览器显示不同

地址信息

console.log(location.href);//打印浏览器地址

(location.href)跳转链接

location.href = "https://www.baidu.com/"

<button id="btn">下一个页面</button>
<button id="btn2">刷新</button> 按钮
location.href = "https://www.baidu.com/"

(reload) 刷新

btn2.onclick = function(){
   location.reload()
    }

onload事件

请添加图片描述

onload案例（一般js放到前面）

	<script>
    window.onload = function(){
        //页面所有资源加载完毕后执行,(图片，视频，dom)
        console.log('页面加载完成');
        console.log(btn);
    }   //直接打印会报错，需要用load事件。
</script>
<body>
 <button id="btn">1</button> 
</body>

resize（检测窗口大小的改变）

resize 用来检测窗口大小的改变、
检测横屏状态还是竖屏状态

 window.onresize = function(){
        console.log("resize");
    }

scroll（检测滚动条）

scroll 用来检测滚动条滚动

window.onscroll = function(){
        console.log("scrloo","滚动距离达到指定距离了？");
    }

兼容性捕捉滚动

document.documentElement.scrollTop

//打印 高版本html带有 <!DOCTYPE html> ||
console.log(document.documentElement.scrollTop);
//适配低版本，没有<!DOCTYPE html>时用。
console.log(document.body.scrollTop)

兼容性写法用||

// 如果不能前面的，就用后面的写法
	window.onscroll = function(){   
    console.log(document.documentElement.scrollTop ||
    console.log(document.body.scrollTop))
    }
    
    if((document.documentElement.scrollTop || document.body.scrollTop)>500){
            console.log("显示回到顶部按钮");
        }else{
            console.log("取消回到顶部按钮");
        }

如何回到顶部

<body>
	<div style="height: 500px;width: 100px;">
	//有宽高的盒子
	</div>
	<button id="btn">回到顶部</button>
	//设置回到顶部按钮
	<script>
	//点击按钮事件
		btn.onclick = function(){
        	// window.scrollTo(0,0)
        	// 1.两个数字 X,Y轴 
        	  window.scrollTo({
            left:0,
            top:0
        })
	</script>
</body>

(打开新的标签页、关闭)

window.open(新标签页)

<body>
<button id="btn">跳转百度</button>
<script>
    btn.onclick = function () {
        window.open("http://www.baidu.com")
    }</script>
</body>
//   CSS中新标签页 
//  <a href="http://www.baidu.com" target="_blank">

window.close（关闭本标签）

<body>   
 <button id="btn1">关闭</button>
<script>
    //window.close() 关闭本标签页
    btn1.onclick = function () {
        window.close()
    } </script></body>