目錄
1. Window對象
1.1 Window尺寸
1.2 其他方法
2. Location對象
3. History對象
4. Screen對象
BOM模型，即浏覽器對象模型，JavaScript将浏覽器的各個部分封裝成為對象。
1. Window對象
window對象，表示浏覽器視窗對象。
所有JavaScript全局對象、全局函數以及變量都是window對象的成員。
-
1.1 Window尺寸
- 确定浏覽器視窗尺寸（不包括工具欄和滾動條）的三種方法
- 于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
- window.innerHeight - 浏覽器視窗的内部高度
- window.innerWidth - 浏覽器視窗的内部寬度
- Internet Explorer 8、7、6、5：
- document.documentElement.clientHeight
- document.documentElement.clientWidth
- document.body.clientHeight
- document.body.clientWidth
- 于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
- 确定浏覽器視窗尺寸（不包括工具欄和滾動條）的三種方法
-
1.2 其他方法
- window.open() - 打開新視窗
- window.close() - 關閉目前視窗
- window.moveTo() - 移動目前視窗
- window.resizeTo() - 調整目前視窗的尺寸
- 移動視窗位置方法與調整視窗方法有可能被浏覽器禁用
- window.setInterval() - 定時器，每隔多少毫秒後執行任務
- window.setTimeout() - 定時器，多少秒後執行一次任務
- window.confirm() - 确認提示框
- window.alert() - 消息對話框
- window.prompt() - 顯示一份提示對話框，帶有一條消息和一個輸入框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window對象</title>
<script>
function testOpen(){
window.open("圖檔.html","_blank","width:200px;height:300px");
}
var id;
function testInterval(){
id = window.setInterval("testOpen()",5000) ;
}
function testInterval(){
clearInterval(id);
}
var tid;
function testTimeout(){
tid=window.setTimeout("testOpen()",3000);
}
function testClearTimeout(){
clearTimeout(toId) ;
}
//确認框
function testConfirm(){
var flag = window.confirm("确認删除嗎?一旦删除,資料不可恢複");
if(flag){
alert("正在删除中....")
}else{
alert("取消該操作") ;
}
}
function testPrompt(){
var flag = prompt("請輸入動态密令") ;
if(flag){
alert("正在支付..");
}else{
alert("密碼錯誤,請重新輸入") ;
}
}
</script>
</head>
<body>
<input type="button" value="testOpen" onclick="testOpen()" /><br />
<input type="button" value="testInterval" onclick="testInterval()"/><br />
<input type="button" value="testClearInterval" onclick="testClearInterval()"/><br />
<input type="button" value="testTimeout" onclick="testTiemOut()"/><br />
<input type="button" value="testClearTimeout" onclick="testClearTimeout()"/><br />
<input type="button" value="testConfirm" onclick="testConfirm()" /><br />
<input type="button" value="testPrompt" onclick="testPrompt()" />
</body>
</html>
2. Location對象
location對象（位址欄對象），用于擷取目前頁面的位址，并将浏覽器重定向至新的頁面。
- 常用屬性
- loction.herf ：跳轉頁面，傳回目前頁面的URL
- loction.reload：重新進入目前頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>location對象</title>
<script>
function href(){
window.location.href="window對象.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ;
}
//定時重新整理
//reload()+setInterval()
function reload(){
//編寫時刻不使用window字首
location.reload();
}
window.setInterval("reload()",2000);
</script>
</head>
<body>
<!--超連結跳轉-->
<a href="window對象.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >超連結</a><hr />
<input type="button" value="href" onclick="href()" /><br />
<input type="button" value="reload" onclick="reload()" />
</body>
</html>
3. History對象
history對象（曆史記錄對象）用于保護使用者隐私，限制JavaScript通路對象的方法。
- 常用方法
- history.back()：加載曆史清單中的前一個URL（類似于後退）
- history.forward()：加載曆史清單中的下一個URL（類似于前進）
- history.go(1)：類似于history.forward()
- history.go(-1)：類似于history.back()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history對象</title>
<script>
function forward(){
// window.history.forward();
window.history.go(1);
}
</script>
</head>
<body>
<a href="history對象目标頁面.html" target="_blank" rel="external nofollow" >超連結</a><br />
<input type="button" value="forward" onclick="forward()"; />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history對象目标頁面</title>
<script>
function back(){
// window.history.back();
window.history.go(-1);
}
</script>
</head>
<body>
目标頁面<br />
<input type="button" value="back" onclick="back()" />
</body>
</html>
4. Screen對象
螢幕對象
- 常用屬性
- screen.height：擷取垂直的螢幕分辨率
- screen.availHeight：除去工作列的高度（螢幕分辨率）
- screen.width：擷取水準的螢幕分辨率
- screen.availWidth：除去工作列的寬度（螢幕分辨率）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>screen對象</title>
<script>
document.write("height:"+screen.height+"<br />");
document.write("availHeight:"+screen.availHeight+"<br />");
document.write("width:"+screen.width+"<br />");
document.write("availWidth:"+screen.availWidth+"<br />");
</script>
</head>
<body>
</body>
</html>
![Struts入門基礎[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)