BOM:Browser Object Model(浏览器对象模型)
核心:window
window属性:(不常用)
1、window.self ===window 代表自己
2、window.parent 返回父窗口
3、window.top 返回顶层窗口,和parent一样
4、window.opener 返回窗口的开启者
window方法
1、window.open(url,name); //打开一个新窗口
url:一个可选的字符串,声明了要在新窗口中显示的文档的url,如果省略了这个参数,或者他的值是空字符串,那么新窗口就不会显示任何文档
name:一个可选的字符串,这个字符串声明了新窗口的名称,所以再次点击按钮打开这个窗口的时候不会增加新窗口,因为这个名称的窗口已经存在,所以直接跳转到这个名称下面的窗口
扩展:还可以通过脚本的方式打开新窗口,但是谷歌默认会把系统自动打开的新网页阻止掉,但不阻止通过事件打开新的网页。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="javascript:;" id="open">通过脚本打开新页面</a>
</body>
</html>
<script type="text/javascript">
//通过脚本打开一个新窗口
var oOpen = document.getElementById('open');
oOpen.onclick = function(){
window.open('opener.html','open');
}
</script>
//注:请在外部建一个html文件,名称为opener.html
2、window.close(); // 关闭浏览器
3、window.alert(显示的文本); //弹出窗
4、window.confirm(对话框提示的文字); //该方法的返回值,点击确定返回true,点击取消返回false
5、window.prompt(提示信息); //弹出输入框,该方法点击确认返回输入框的内容,点击取消返回null
history对象
location对象
window事件
onload:加载事件网页加载完毕后执行。
onscroll:滚动事件。
onresize:窗口缩放事件。
// 获取浏览器视窗宽度/高度
document.documentElement.clientWidth;
document.documentElement.clientHeihgt;
// 获取浏览器滚动条隐藏的宽度/高度
chrome(body)、火狐、IE(documentElement)
document.documentElement.scrollLeft || document.body.scrollLeft;
document.documentElement.scrollTop || document.body.scrollTop;