JS-BOM程式設計
1.開啟和關閉視窗
BOM程式設計中，window對象是頂級對象，代表浏覽器視窗。
window有open和close兩個函數，可以開啟視窗和關閉視窗。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>open和close</title>
</head>
<body>
<!-- 調用open函數，打開視窗 -->
<input type="button" value="打開百度(預設新視窗)" onclick="window.open('https://www.baidu.com/')">
<input type="button" value="打開百度(目前視窗)" onclick="window.open('https://www.baidu.com/','_self')">
<input type="button" value="打開百度(新視窗)" onclick="window.open('https://www.baidu.com/','_blank')">
<input type="button" value="打開百度(父視窗)" onclick="window.open('https://www.baidu.com/','_parent')">
<input type="button" value="打開百度(頂級視窗)" onclick="window.open('https://www.baidu.com/','_top')">
<input type="button" value="打開本地檔案" onclick="window.open('open.html')">
</body>
</html>
被打開的本地檔案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>open</title>
</head>
<body>
<p>Hello</p>
<!-- 調用close函數，關閉目前視窗 -->
<input type="button" value="關閉視窗" onclick="window.close()">
</body>
</html>
2.彈出消息框和确認框
彈出消息框：window.alert("消息")
彈出确認框：window.confirm("描述資訊")
調用完confirm函數後會傳回一個值：
- 如果使用者點選的是确認，值為true。
- 反之值為false。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彈出确認框</title>
</head>
<body>
<script type="text/javascript">
var del = function() {
var ok = window.confirm("确認删除嗎？");
if(ok) {
alert("delete date...");
}
}
</script>
<input type="button" value="彈出消息框" onclick="window.alert('消息')"><br>
<input type="button" value="彈出确認框" onclick="window.del()">
</body>
</html>
3.将目前視窗設為頂級視窗
當一個使用者登入一個網站後，如果長時間不進行操作，登入會逾時。
這時，如果使用者回來想接着操作，當點選頁面時，頁面會跳轉到登入界面讓使用者重新登入。
如果沒有特殊設定，登入界面會顯示在逾時頁面的工作區，但在工作區顯示登入頁面會顯得比較突兀，
這時，我們就可以将顯示在工作區的登入頁面設為頂級視窗。
代碼實作：
原頂級視窗：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>将目前視窗設為頂級視窗</title>
</head>
<body>
<h3>頂級視窗</h3>
<!-- 嵌入子視窗 -->
<iframe src="child-window.html" width="600px" height="300px">
</body>
</html>
子視窗：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彈出确認框</title>
<style type="text/css">
/* 設定子視窗背景顔色 */
* {
background-color: aqua;
}
</style>
</head>
<body>
<script type="text/javascript">
//如果目前視窗不是頂級視窗，設定為頂級視窗
toTop = function() {
if(window.top != window.self) {
window.top.location = window.self.location;
}
}
</script>
<h3>目前視窗</h3>
<!-- 點選按鈕調用toTop函數 -->
<input type="button" value="設為頂級視窗" onclick="toTop()">
</body>
</html>
4.視窗前進和後退
開始視窗：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前進和後退</title>
<style type="text/css">
/*設定連結字型*/
a {
font-size: 20px;
}
</style>
</head>
<body>
<!-- 新頁面連結 -->
<a href="son/new-window.html">new-window</a>
<!-- 前進 -->
<input type="button" value="前進" onclick="window.history.go(1)">
</body>
</html>
新視窗：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>new-window</title>
</head>
<body>
<!-- 後退方式1：調用back()函數 -->
<input type="button" value="後退1" onclick="window.history.back()">
<!-- 後退方式2：調用go()函數 -->
<input type="button" value="後退2" onclick="window.history.go(-1)">
</body>
</html>
5.設定位址欄的url
可以通過設定window.location或者document.location對象的href來設定位址欄的url。
window.location對象用于獲得目前頁面的位址 (URL)，并把浏覽器重定向到新的頁面。
document.location也可以獲得并設定目前頁面的url。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>設定位址欄的url</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var toBaidu1 = function() {
// var locationObj = window.location;
// locationObj.href = "http://www.baidu.com";
window.location.href = "http://www.baidu.com";
}
var toBaidu2 = function() {
//可以忽略href
window.location = "http://www.baidu.com";
}
var toBaidu3 = function() {
//document也可以
//document.location.href = "http://www.baidu.com";
document.location = "http://www.baidu.com";
}
</script>
<input type="button" value="百度1" onclick="toBaidu1()">
<input type="button" value="百度2" onclick="toBaidu2()">
<input type="button" value="百度3" onclick="toBaidu3()">
</body>
</html>
6.總結
- 開啟和關閉視窗：
- window.open('url')
- window.close()
- 彈出确認框：
-
if(window.confirm("是否删除？")) { //删除操作 }
-
-
-
setTop = function() { if(window.top != window.self) { window.top.location = window.self.location; } }
-
-
- 前進：window.history.go(1)
- 後退：window.history.back()
-
- 表單
- 直接在位址欄手寫url
- 超連結
- window.location.href = "url";
- document.location = "url";
- window.open("url")
- 以上所有方式都可以攜帶資料，但隻有表單和直接在位址欄手寫url是動态的，輸入什麼資料，就送出什麼資料，其他方式都把資料寫死了。