0x00 BOM基础

BOM(Browser Object Model) 浏览器对象模型，是一个与浏览器窗口进行交互的对象

0x01打开或关闭一个窗口

window.open(url)

如果没有传入url，将会打开一个空白页面。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<button οnclick="window.open()">打开</button>
<button οnclick="window.close()">关闭</button>
</body>
</html>

返回值为新页面的句柄

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<button οnclick="openNewPage()">打开</button>
<button οnclick="window.close()">关闭</button>
<script type="text/javascript">
	function openNewPage(){
		var hPage =window.open();
		hPage.document.write("我是一个新页面");
	}
</script>
</body>
</html>

window.close()

关闭当前页面，但是只能关闭由window.open()打开的页面

0x02 BOM常用属性和系统对话框

window.navigator.userAgent 获取设备及浏览器的类型型号

window.location 获取当前文档地址对象

location.host 主机加端口号
location.hostname 主机
location.port 端口号
location.protocol 协议
location.pathname路径
location.hash片段标识符，可用于保存网页状态
location.search 返回问号后的字段

系统对话框

警告框：alert("内容")

选择框: confirm("提问的内容")

输入框:prompt(”提示内容“,"默认值") 返回值为输入内容，默认值可以没有

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<script type="text/javascript">
	// 获取设备及浏览器的类型型号
	console.log(window.navigator.userAgent); 
    console.log(window.location.host); //主机加端口号
    console.log(window.location.hostname); //主机
    console.log(window.location.port); //端口号
    console.log(window.location.protocol); //协议
    console.log(window.location.pathname);//路径
    console.log(window.location.hash);//片段标识符，可用于保存网页状态
    console.log(window.location.search); //返回问号后的字段
</script>
</body>
</html>

可以用location.href=url实现跳转

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<button οnclick="window.location.href='http://www.baidu.com'">跳转</button>
<script type="text/javascript">

</script>
</body>
</html>

0x03 BOM常用事件

window.onload

window.onscroll 滚动事件

滚动距离：

谷歌浏览器 document.body.scrollTop

ie,火狐浏览器 document.documentElement.scrollTop

window.onresize窗口变化事件

可视区尺寸

document.documentElement.clientWidth

document.documentElement.clientHeight

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div{
			height:2000px;
			background: black;
		}
	</style>
</head>
<body>
<div ></div>
<script type="text/javascript">
window.onscroll = function(){
	if(document.body.scrollTop){
		console.log(document.body.scrollTop);
	}else{
		console.log(document.documentElement.scrollTop);
	}
};
window.onresize = function(){
	console.log("Height",document.documentElement.clientHeight);
}
</script>
</body>
</html>

来源：CSDN

作者：无在无不在

链接：https://blog.csdn.net/weixin_43415644/article/details/104093630

标签

bom

javaScriptDay0A:BOM

0x00 BOM基础

0x01打开或关闭一个窗口

0x02 BOM常用属性 和系统对话框

0x03 BOM常用事件

0x02 BOM常用属性和系统对话框