今天我們來了解下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/