楔子：
1、BOM 編程中，window物件是頂級物件，代表瀏覽器視窗，
2、window 有 open 和 close 方法，可以開啟視窗和關閉視窗，
一、open 與 close：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOM編程-open和close</title>
</head>
<body>
<!-- 也可以open本地的html檔案 -->
<!-- 默認是新視窗 -->
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/10/開啟百度(新視窗)" onclick="window.open('http://www.baidu.com');" />
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/10/開啟百度(當前視窗)" onclick="window.open('http://www.baidu.com', '_self');" />
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/10/開啟百度(新視窗)" onclick="window.open('http://www.baidu.com', '_blank');" />
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/10/開啟百度(父視窗)" onclick="window.open('http://www.baidu.com', '_parent');" />
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/10/開啟百度(頂級視窗)" onclick="window.open('http://www.baidu.com', '_top');" />
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/10/關閉當前視窗" onclick="window.close();" />
</body>
</html>
二、彈出訊息框和確認框：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>彈出訊息框和確認框</title>
</head>
<body>
<script type="text/javascript">
function del(){
if(window.confirm("親，確認洗掉資料嗎？")){
alert("delete data ....");
}
}
</script>
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/10/彈出訊息框" onclick="window.alert('訊息框!')" />
<!--洗掉操作的時候都要提前先得到用戶的確認，-->
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/10/彈出確認框(洗掉)" onclick="del();" />
</body>
</html>
三、將視窗設定為頂級視窗:
頂級視窗的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>頂級視窗</title>
</head>
<body>
<!-- 子視窗為咱們自己寫的本地html檔案 -->
<iframe src="https://www.cnblogs.com/Burning-youth/archive/2022/02/10/015.html"></iframe>
</body>
</html>
子視窗的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子視窗</title>
</head>
<body>
<script type="text/javascript">
//將此視窗設定為頂級視窗
function jump(){
if(window.top != window.self){
window.top.location = window.self.location;
}
}
</script>
<br />
<!-- 點擊按鈕，執行jump()函式 -->
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/10/跳轉為頂級視窗" onclick="jump()" />
</body>
</html>
四、history 物件：
最初的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>最初的頁面</title>
</head>
<body>
<a href="https://www.cnblogs.com/Burning-youth/archive/2022/02/10/001.html">跳轉到有后退按鈕的頁面</a>
<!-- 前進代碼： -->
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/10/前進" onclick="window.history.go(1)"/>
</body>
</html>
跳轉后的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跳轉后的頁面</title>
</head>
<body>
<!-- 讓頁面倒退的兩種代碼： -->
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/10/后退" onclick="window.history.go(-1)"/>
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/10/后退" onclick="window.history.back()"/>
</body>
</html>
五、設定瀏覽器地址欄上的URL：
總結，有哪些方法可以通過瀏覽器往服務器發請求？
1、表單form的提交，
2、超鏈接，<a href="http://localhost:8080/oa/save?username=zhangsan&password=123">用戶只能點擊這個超鏈接</a>
3、document.location
4、window.location
5、window.open("url")
6、直接在瀏覽器地址欄上輸入URL，然后回車（這個也可以手動輸入，提交資料也可以成為動態的），
以上所有的請求方式均可以攜帶資料給服務器，只有通過表單提交的資料才是動態的，
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>設定瀏覽器地址欄上的URL</title>
</head>
<body>
<script type="text/javascript">
function goBaidu(){
/*
第一種寫法
window.location.href = "http://www.baidu.com";
*/
/*
第二種寫法
window.location = "http://www.baidu.com";
*/
/*
第三種寫法
document.location.href = "http://www.baidu.com";
*/
// 第四種寫法:
document.location = "http://www.baidu.com";
}
</script>
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/10/百度1" onclick="goBaidu();"/>
<!-- 第五種寫法 -->
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/10/百度2" onclick="window.open('http://www.baidu.com');" />
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/423669.html
標籤：其他
上一篇：如何高效地寫 Form
下一篇：前端之CSS初始