目录
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>