BOM..

BOM

• BOM(Browser Object Model):浏览器对象模型
• 其实就是操作浏览器的一些能力
• 可以操作的内容
  • 获取一些浏览器的相关信息（窗口大小）
  • 操作浏览器进行页面跳转
  • 获取当前浏览器地址栏的信息
  • 操作浏览器的滚动条
  • 浏览器的信息（版本）
  • 让浏览器出现一个弹出框（alert/confirm/prompt）
• BOM的核心2就是window对象
• window是浏览器内置的一个对象，里面包含着操作浏览器的方法

1.获取浏览器窗口尺寸

• innerHeight和innerwidth
• 这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的）

<script>
	var windowHeight = window.innerHeight
	console.log(windowHeight)
	var windowwidth = window.innerwidth
	console.log(windowwidth)
</script>

<style>
	*{
		margin:0;
		padding:0;
	}
	html,body{
		width:100%;
		height:100%;
	}
</style>

<script>
	console.log(window.innerHeight,innerHeight)
	console.log(window.innerWidth,innerWidth)
	//window获取的是显示的窗口的宽和高
</script>

2.浏览器的弹出层

• alert是在浏览器弹出一个提示框

<button id ="btn">click</button>
<script>
//提示
	btn.onclick = function(){
		alert("用户名不匹配")
	}

//过一会再弹出
	btn.onclick = function(){
		setTimeout(function(){
			alert("缓存清除成功")
		}，2000)
	}


//询问框
	btn.onclick = function(){
		var res = confirm("你确定要删除吗")
		console.log(res)
		if(res){
		} else{
		
		}
	}

//输入框prompt
	btn.onclick = function(){
		var res = prompt("请输入你的用户名")
		console.log(res)
		}
//使用弹出框之后，js就会被阻塞，必须点掉他，才能执行后面的代码
</script>

3.About 浏览器

浏览器的地址信息

• 在window中有一个对象叫做location
• 就是专门用来储存浏览器的地址栏内的信息

location.herf

• location.herf这个属性储存的是浏览器地址栏内的url地址的信息
  console.log(window.location.herf)
  • 会把中文变成url编码的格式
• location.herf这个属性也可以给它赋值

window.location.herf =   `./index.html `
//这个就毁跳转页面到后面你给的那个网址

<button id="btn">下一个页面</button>
<script>
	console.log(location.herf)//拿到浏览器地址
	btn.onclick = function(){
		location.href = "http:www.baidu.com"
	}
</script>

location.reload

• location.reload()这个方法会重新加载一遍页面。就相当于刷新是一个道理

<button id ="btn2">刷新</button>
<script>
	console.log(location.reload)
	btn2.onclick = function(){
		location.reload ()
</script>

浏览器常见事件

浏览器的onload事件

• 这个不再是对象了，而是一个事件
• 实在页面所有资源加载完毕后执行的

<botton id="btn">click</botton>
<script>
window.onload = function(){
	//页面所有资源都加载完毕后执行（图片，视频，dom）
	console.log('页面已经加载完毕')
	console.log(btn)//onload事件时可以把<script>放到head中，因为是所有资源加载完毕后执行
}
</script>

浏览器的resize事件（窗口大小发生变化时触发）

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

浏览器scroll事件（滚动条运动时触发）

<script>
	window.onscroll = function(){
		console.log("scroll","滚动距离达到指定距离了？")
</script>

浏览器滚动距离-页面滚动（呈上）

<style>
	body{
		height:3000px;
	}
</style>

<script>
	//document.documentElement.scrollTop(内容是从document去拿的)
	window.onscroll = function(){
		//兼容性
		console.log(document.documentElement.scrollTop || 
		document.body.scrpllTop>100){
			console.log("显示回到顶部按钮")
		}else{
			conosle.log("隐藏回到顶部按钮")
		}
	}
</script>

//返回顶部
<style>
	body{
	width:3000px;
	height:3000px;
</style>

<div style="height:300px;width:100px;"></div>
<button>回到顶部</button>
<script>
	window.onscroll = function(){
		console.log(document.documentElement.scrollTop || documemt.body.scrollTop)
		if((document.documentElement.scrollTop || documemt.body.scrollTop)>100){
		console.log("显示回到顶部按钮")
		}else{
			console.log("隐藏回到顶部按钮")
		}
	}
	btn.onclick = function(){
		//1.两个数字，x轴，y轴
		window.scrollTo()
		
		//2.对象
		window.scrollTo({
			teft:0,
			top:0
		})
	}	
</script>

浏览器打开标签页

<button id = "btn">click</button>
<button id = "btn2">close</button>
<script>
	//location.herf = ""
	//window.open("")传地址
	btn.onclick = function(){
		window.open("http://www.baidu.com")
	}

	//window.colse()关掉的是自己
	btn2.onclick = function(){
		window.colse()
	}
</script>

浏览器的历史记录

• window中有一个对象叫做history
• 是专门用来储存历史记录信息的

history.back

• history.back是用来回退历史记录的，就是回到前一个页面就相当于浏览器上的“←”按钮
  window.history.back()
  • 前提是你要有上一条记录，不然就是一直在这个页面，也不会回退

history.forward

• history.forward是去到下一个历史记录里面，也就是去到下一个页面，就相当于浏览器上的“→”按钮
  window.history.forward
  • 前提是你要之前有过回退操作，不然的话你现在就是最后一个页面。没有下一个

<button id="btn">前进到02.html</button>
<script>
	btn.onclick = function(){
		//location.herf="02.html"(方法一)
		history.forward()//这个方法必须保证已经历史记录中有下一个界面才能进行下去
		history.go(+1)//跟上面的forward是一个意思，就是+1页
	}
</script>



//创建另一个html和上一个交互
02.html
<button id="btn">history.back()</button>
<script>
	btn.onclick=function(){
		history.back()//必须保证历史记录中已经有上一个页面，才能回退过去
		history.go(-1)//跟上面的back是一个意思，就是-1页


/*如果要返回两个页面，就是从页面1跳到页面2，从页面2跳
到页面3，再从页面3回退两个页面到页面1*/
</script>

浏览器本地储存

1.localStorage(永久存储)

<script>
//增
localStorage.setItem("name","zxy")
//取
localStorage.getItem("name")
//删
localStorage.removeItem("name")
//清空
localStorage.clear()
</script>

<button id="btn">存</button>
<button id="btn2">取</button>
<button id="btn3">删</button>
<button id="btn4">清除</button>
<script>
	btn.onclick = function(){
		localStorage.setItem("name","zxy")
	}//可在检查的Application中查看
	/*只能存字符串，不能存对象，如果要存对象，可以加一
	个"JSON,stringify"👇，取的时候也要加*/
	localStorage.setItem("obj",JSON.stringify({name:"zxy",age:100}))
	}


	btn2.onclick = function(){
		console.log(JSON.parse(localStorage.getItem("obj")))
	}
	btn3.onclick = function(){
		console.log(localStorage.removeItem("name"))
	}
	btn4.onclick = function(){
		localStorage.clear()
	}
</script>

2.sessionStorage(会话存储/临时存储：关闭页面就丢失)

<script>
//增
sessionStorage.setItem("name","zxy")
//取
sessionStorage.getItem("name")
//删
sessionStorage.removeItem("name")
//清空
sessionStorage.clear()
</script>

<button id="btn">存</button>
<button id="btn2">取</button>
<button id="btn3">删</button>
<button id="btn4">清除</button>
<script>
	btn.onclick = function(){
		sessionStorage.setItem("name","zxy")
	}//可在检查的Application中查看
	/*只能存字符串，不能存对象，如果要存对象，可以加一
	个"JSON,stringify"👇，取的时候也要加*/
	sessionStorage.setItem("obj",JSON.stringify({name:"zxy",age:100}))
	}


	btn2.onclick = function(){
		console.log(JSON.parse(sessionStorage.getItem("obj")))
	}
	btn3.onclick = function(){
		sessionStorage.removeItem("name")
	}
	btn4.onclick = function(){
		sessionStorage.clear()
	}
</script>

案例：记住用户名记住用户名