今天我们来了解下BOM的一些基础。
一、window.open() 方法及相关参数
在这里我只介绍两个参数。第一个参数是URL，声明了要打开的地址。第二个参数是 target，它有几种选择：_self 在自身窗口打开、_blank 在新开窗口打开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>open</title>
</head>
<body>
<input type="button" value="新窗口" id="btn1" />
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
window.open('http://www.baidu.com/', '_blank');
}
}
</script>二、window.close()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>close</title>
</head>
<body>
<input type="button" value="关闭" id="close" />
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('close');
oBtn.onclick = function(){
window.close();
}
}
</script>需要注意的是：在 ie 下会提示关闭，而 ff 下则无法关闭，chrome 则直接关闭。只有在 window.open 下打开的窗口，才能一样关闭。
三、navigator.userAgent
检测浏览器版本。具体用法：window.navigator.userAgent
四、window.location
读写地址栏。具体用法：http://www.w3school.com.cn/htmldom/dom_obj_location.asp
五、三种系统对话框
1、alert(“内容”) 没有返回值
2、confirm("问题") 返回布尔值(true/false)
3、prompt("问题","初始值") 返回字符串或者null
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>系统对话框</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
alert('abc'); //没有返回值
confirm('今天下雨了么？'); //返回布尔值（true/false）
prompt('请输入你的姓名？', '张三'); //返回字符串或null
</script>六、window对象常用事件
1、onload 这个已经很常用了，就不多说了
2、onscroll 浏览器滚动时触发事件
3、onresize 缩放浏览器时触发事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>onscroll，onload，onresize</title>
<style type="text/css">
#div1{width:100px;height:100px;background:red;position:absolute;right:0;}
</style>
</head>
<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>
<script type="text/javascript">
window.onresize = window.onload = window.onscroll = function(){
var oDiv = document.getElementById('div1');
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var t = (document.documentElement.clientHeight - oDiv.offsetHeight) / 2;
oDiv.style.top = scrollTop + t + 'px';
}
</script>已上代码，无论浏览器放大还是缩小，亦或者是滚动，红色块始终在右侧居中位置。当然，我们可以用 css(position:fixed;) 来实现这样的效果。
PS：博客搬家了，以后不再 CSDN 更新了，见谅。最新博客地址：http://www.cnblogs.com/yjzhu/