web_day04_JavaScript_BOM物件
阿新 • • 發佈：2018-12-12
BOM(瀏覽器物件模型)
通過BOM物件可以操作瀏覽器
Window(視窗)
屬性
可以訪問包括自身在內的其他四個物件
Window.history===history
方法
- 提示框
- alert() 提示框
- confirm() 確認框
- prompt() 提示輸入框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>window方法之確認框</title> <script type="text/javascript"> var value = window.confirm("您確定退出嗎?"); alert(value);//確定:true,取消:false </script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>window方法之輸入框</title> <script type="text/javascript"> var value = window.prompt("請輸入使用者名稱:"); alert(value);//確定:輸入的內容,取消:null </script> </head> <body> </body> </html>
- 定時器
- 定時器：有id返回值
- setInterVal(要執行的函式,間隔的毫秒值); 週期性定時器 反覆執行
- clearInterVal(週期性定時器的id)
- setTimeOut(要執行的函式,間隔的毫秒值);執行一次的定時器
- clearTimeOut(執行一次的定時器)
- 開啟和關閉
- 開啟：open()
- 關閉：close()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>開啟A</title> <script type="text/javascript"> function poenA(){ window.open("a.html"); } </script> </head> <body> <input type="button" value="開啟A頁面" onclick="poenA()"/> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>關閉A</title>
<script type="text/javascript">
function closeA(){
window.close();
}
</script>
</head>
<body>
我是A頁面
<input type="button" value="關閉A頁面" onclick="closeA()"/>
</body>
</html>
History(瀏覽歷史)
forward() 前進
back() 後退
go(index)
go(1)
go(-1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>history物件之go方法</title>
<script type="text/javascript">
function goTo(){
history.go(1);
}
</script>
</head>
<body>
<a href="02.html">去往第二個頁面</a>
<input type="button" value="去第二個頁面" onclick="goTo()"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>history物件之go方法</title>
<script type="text/javascript">
function goBack(){
history.go(-1);
}
</script>
</head>
<body>
我是第二個頁面
<input type="button" value="去第一個頁面" onclick="goBack()"/>
</body>
</html>
Location(定位URL)
屬性：href
- 獲取當前頁面的URL
- location.href
- 設定當前頁面的URL
- location.href=""
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location物件</title>
<script type="text/javascript">
function getUrl(){
alert(location.href);
}
function setUrl(){
location.href="https://www.baidu.com";
}
</script>
</head>
<body>
<input type="button" value="獲取URL" onclick="getUrl()"/>
<input type="button" value="設定URL" onclick="setUrl()"/>
</body>
</html>