1.BOM概念
- BOM(Browser Object Mode):瀏覽器對象模型
通過window對象來控制bom,在鵝湖段JavaScript中，Window對象是全局對象，所有表達式都在當前環境中計算
2.系統對話框
瀏覽器可以通過系統對話框，向用戶顯示信息。系統提供了三個函數，可以完成系統對話框的操作
-
alert()
直接彈出警告框
【參數】：警告框上顯示的內容 -
confirm()
【功能】：彈出一個帶有確定和取消按鈕的警告康
【返回值】：如果點擊確定，返回true，點擊取消，返回false -
prompt()
【功能】：彈出一個帶輸入框的提示框
【參數】：第一個參數：要在提示框上顯示的內容
第二個參數：輸入框內默認的值
【返回值】：點擊確定：返回值是輸入的內容；點擊取消，返回值是null
3.bom–open方法
- open()
【參數】：參數一：要加載的uri。參數二：窗口的名稱或者窗口的目標。參數三：一串具有特殊意義的字符串
具體如下：
<script type="text/javascript">
window.onload=function()
{
var a=document.getElementById("btn");
a.onclick=function()
{
open"http://www.baidu.com"//【注】：如果只有第一個參數，調用open方法會打開新窗口，加載url
open("http://www.baidu.com","百度","width=400px,height=400px,top=500px,left=200px")
//【注】第二個參數，是給打開的新的窗口起一個名字，以後再去加載url，就在這個已經起好名字的目標窗口加載url
}
}
</script>
還有一個opener對象，可以通過他調用打開這個窗口的 父窗口的對象，具體使用方法如下
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>parent</title>
<style type="text/css">
body{
background-color: #FF0000;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var p=document.getElementById("btn");
p.onclick=function()
{
open("child.html","child","width=400px,height=400px,top=500px,left=200px");
}
}
</script>
</head>
<body>
<input type="button" name="" id="btn" value="跳轉子頁面" />
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>child</title>
<style type="text/css">
body{
background-color: #800080;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var c=document.getElementById("btn");
c.onclick=function()
{
opener.document.write("輸出輸出")
}
}
</script>
</head>
<body>
<input type="button" name="" id="btn" value="輸出" />
</body>
</html>
4.bom–location屬性
alert(location);
alert(window.document.location);
alert(window.location);三者是相等的
alert(window.location==window.document.location);//true
具體如下：
<script type="text/javascript">
/*
location 我們瀏覽器上的地址欄輸入框
【注】他提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航功能。
*/
alert(location.hash);//錨點 #1 實現業內跳轉
location.hash="#3";//可賦值
alert(location.host);//IP:端口號
alert(location.hostname);//域名/IP
//【注】：域名就是給IP起一個好聽點的名字
alert(location.href);//整個url
alert(location.pathname);//路徑名
alert(location.port);//端口號
alert(location.protocol);//協議
//http: 網絡協議 file：本地協議
alert(location.search);//查詢字符串，跟在？後的部分
location.search="?id=xxx"//可賦值
/*url 統一資源定位符
protocol(協議):host(主機名):port(端口號)/pathname(路徑)?search(查詢字符串)#hash(錨點)
http://www.baidu.com:8080/code/xxx.html?username=xxx#1
*/
</script>
| 方法 | 功能 | 備註 |
|---|---|---|
| assign() | 跳轉到指定頁面，與href等效 | 如果傳參，參數爲true的時候，強制加載，從服務器源頭重新加載（忽略緩存） |
| reload() | 重載當前url | |
| replace() | 用新的url替換當前頁面 | 可以避免產生跳轉前的歷史記錄 |
5.history對象
- history是window對象的屬性，他保存這個用戶上網的記錄
- 屬性： history.length
【功能】：返回當前history對象中記錄的歷史記錄的條數
| 方法 | 功能 | 備註 |
|---|---|---|
| history.back | 前往瀏覽器歷史目前前一個URL，類似後退 | |
| history.forward() | 前往瀏覽器歷史條目下一個URL，類似前進 | |
| history.go(num) | 瀏覽器在history對象中向前或向後 | 參數：0重載當前頁面；正數前進對應數量的記錄；負數後退對應數量的記錄 |
6.小例子：bom–search的處理
在Web開發中，經常需要獲取諸如?id=5&search=ok這種類型的URL鍵值對，通過location，寫一個函數
具體代碼如下：
<script type="text/javascript">
/*?id=5&serach=ok
獲取url中的search，通過傳入對應key，返回key對應的value
例子：傳入id，返回6
*/
function getValue(search,key)
{//<1>找出key第一次出現的位置
var start=search.indexOf(key);
if(start==-1)
{
return;
}else{
//<2>找出鍵值對結束的位置
var end=search.indexOf("&",start);
if(end==-1)
{
//這是最後一個鍵值對
end=search.length;
}
}
//<3>將這個鍵值對提取出來
var str=search.substring(start,end);
//<4>key=value 獲取value
var arr=str.split("=");
return arr[1];
}
var search="?id=5&serach=ok";
alert(getValue(search,"serach"));
</script>
輸出：ok