JavaScript（二）BOM

学习记录
119 阅读3分钟

二、BOM

  • BOM 浏览器对象模型
  • 浏览器的一些操作能力
  • 操作
    • 获取浏览器的窗口大小
    • 操作浏览器页面跳转
    • 获取当前浏览器地址栏信息
    • 操作浏览器滚动条
    • 浏览器版本
    • 浏览器弹窗
  • BOM的核心就是window对象
  • window是浏览器内置的一个对象，里面包含浏览器的方法

image.png

1. 获取浏览器窗口尺寸

  • innerHeight window.innerHeight innerWidth window.innerWidth
  • 可以加window获取到，也可以不加
  • 宽高包含滚动条的部分

2. 弹出层

  • 会阻塞js代码执行
  1. alter()
  2. confirm() 询问框
    • 返回值：确定-true 取消 - false
  3. prompt() 输入框
    • 返回输入的内容

3.浏览器的地址信息

  • window中有一个对象叫做 location
  • 专门用来存储浏览器地址栏的信息
  • window.location / location
    1. hre 为网页地址
      • 是中文会进行编码，方便传入后端
      • decodeURI(href的值) 可以进行解码
      • 作用：跳转页面
    2. reload 重新加载一遍
      • location.reload 较少使用
      • 使用场景：前端删除数据，已显示的界面无法更新，则进行reload重新获取后端数据，显示在界面上【缺点：与后端联系次数太多】
<body>
	<button id="btn"></button>

	<script>
		btn.onclick = function(){
			location.href = 'https://m.baidu.com/'
		}
	</script>
</body>

4.浏览器常用事件

  • 挂在window下

4.1 onload

  1. 背景
    • js代码是从上往下执行，在执行console.log('btn')代码时，btn还未定义
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title> 
   <script>
   	console.log(btn) //btn is not defined
   </script>
</head>
<body>
   <button id="btn"></button>

</body>
  1. 解决
    • onload 作用：等页面所有资源加载完成后执行，（图片、视频、dom）
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script>
   	window.onload = function(){
   		console.log('加载完成')
   		console.log(btn)

   	}
   </script>
</head>
<body>
   <button id="btn"></button>

   <!-- <script>
   	
   </script> -->
</body>

4.2 onresize

  • 作用：

    • 在媒体查询不支持的情况下，resize可以知道窗口的大小，进行窗口栏的控制
    • 检查屏幕是在横屏状态还是竖屏

  • 屏幕大小变化，onresize就会起作用

<script>
        window.onresize = function(){
                console.log("resize")
        }
</script>

4.3 onscroll

  • 滚动条变化，onscroll就起作用
  • 知道实时滚动
  • 滚动距离达到指定距离，则显示一些按钮出现
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		body {
			height: 1000px;
		}
	</style>
</head>
<body>
	<button id="btn"></button>

	<script>
		window.onscroll = function(){
			console.log("onscroll")
		}
	</script>
</body>
  1. 竖向滚动距离 document.documentElement.scrollTop
    • 计算的是下图红色部分的长度
    • 若没有<!DOCTYPE html>或者低版本浏览器不支持，则document.documentElement.scrollTop失效
      • 改为document.body.scrollTop
      • 最好写成document.documentElement.scrollTop || document.body.scrollTop image.png
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		body {
			height: 1000px;
		}
	</style>
</head>
<body>
	<button id="btn"></button>

	<script>
		console.log(document.documentElement.scrollTop)
		window.onscroll = function(){
			console.log(document.documentElement.scrollTop)
		}
	</script>
</body>

//实际案例
window.onscroll= function(){
        console.log(document.documentElement.scrollTop || document.body.scrollTop)
        if ((document.documentElement.scrollTop || document.body.scrollTop) > 200 ){

                console.log("显示按钮")
        } else {
                console.log("隐藏按钮")
        }
}
  1. 横向滚动距离 document.documentElement.scrollLeft
    • document.documentElement.scrollLeft || document.body.scrollLeft

4.4 scrollTo()

  • 滚到指定位置
  • 方法一
    • window.scrollTo(x,y)
  • 方法二
    • window.scrollTo({ left:0,top:0 })
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		body {
			height: 1000px;
		}
	</style>
</head>
<body>
	<button id="btn" style="margin: 200px;">回到顶部</button>

	<script>

		window.onscroll= function(){
			console.log(document.documentElement.scrollTop || document.body.scrollTop)
			if ((document.documentElement.scrollTop || document.body.scrollTop) > 200 ){
				
				console.log("显示按钮")
			} else {
				console.log("隐藏按钮")
			}
		}
		
		btn.onclick = function(){
			// window.scrollTo(0,0)
			window.scrollTo({
				left:0,
				top:0
			})
	
	</script>
</body>

4.5 open()

  • window.open()
  • 浏览器打开新的标签页+跳转到对应地址
<body>
	<button id="btn">确定</button>

	<script>
		btn.onclick = function(){
			window.open("https://m.baidu.com/")
		}
	</script>
</body>

4.6 close()

  • 关闭自身页面，跳转的新页面已经脱离自身控制了
<body>
	<button id="btn">确定</button>
	<button id="btn2">关闭</button>

	<script>
		btn.onclick = function(){
			window.open("https://m.baidu.com/")
		}

		btn2.onclick = function(){
			window.close()
		}
	</script>
</body>

5. 浏览器的历史记录history

  • 专门存储历史记录
  • 在移动过端经常使用

5.1 back()

  • 历史记录必须保证有上一个界面才能回退
// ./01.html文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>01.html</title>
</head>
<body>
	<button id="btn">跳转到01.html文件</button>


	<script>
		btn.onclick = function(){
			location.href = "02.html"
		}
	</script>
</body>
</html>


// ./02.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<p>I am 02.html</p>
	<br/>
	<button id="btn">history.back()</button>
	<script>
		btn.onclick = function(){
			history.back()
		}
	</script>
</body>
</html>

5.2 forward()

  • 历史记录中有上一个界面才能前进
btn.onclick = function(){
    history.forward()
}

5.3 go(参数1)

  • 参数1
    • 正数 前进X界面
    • 负数 回退X界面
btn.onclick = function(){
    history.go(1)
    //history.go(-2)
}

6.本地存储

  • 背景：登陆界面，点击记住用户名和密码，会被存入到浏览器加密文件内，存在本地电脑上

6.1 localStorage

  1. 存
    • localStorage.setItem("key","value")
    • 多次存重复的信息，只会覆盖之前存储的信息
    • 只能存字符串
      • 若要存对象类型：JSON.stringify()
btn.onclick = function(){
    localStorage.setItem("age","100")
    localStorage.setItem("obj",JSON.stringify({"name":"kiki","age":100}))
}
  1. 取
    • 取对象类型 JAON.parse()
btn.onclick = function(){
    console.log(localStorage.getItem("age"))
    console.log(JSON.parse(localStorage.getItem("obj")))
}

  1. 修改

    • 重新写存储的信息

  2. 删

btn.onclick = function(){
    localStorage.removeItem("age")
}
  1. 全部清除
btn.onclick = function(){
    localStorage.clear()
}

6.2 SessionStorage

  • 用法和localStorage一样
  • 区别
    • 存储位置
    • localStorage 永久存储，除非格式化电脑 ；sessionStorage 会话存储/临时存储，关闭页面就丢失 image.png

6.3 记住用户名

  • 从input中取到内容
    • id名.value
<body>
	<div>
		用户名：
		<input type="text" id="user">
	</div>
	<div>
		密码
		<input type="password" id="password">
	</div>
	<div>
		<button id="login">登录</button>
	</div>

	<script>
		//先获取用户名，密码进行存储
		var uservalue = localStorage.getItem("user",user.value)
		var passvalue =localStorage.getItem("password",password.value)

		if(uservalue && passvalue){
			user.value = uservalue
			password.value = passvalue
		}
		login.onclick = function(){
			console.log(user.value,password.value)
			localStorage.setItem("user",user.value)
			localStorage.setItem("password",password.value)
		}
	</script>
</body>
avatar
文章
阅读
粉丝