JavaScript---BOM對象

一、BOM簡介

BOM（瀏覽器對象模型），能夠對瀏覽器窗口進行訪問和操做。使用 BOM，開發者能夠移動窗口、改變狀態欄中的文本以及執行其餘與頁面內容不直接相關的動做。

使 JavaScript 有能力與瀏覽器「對話」。

二、window 對象

1 window對象 2  全部瀏覽器都支持 window 對象。 3  概念上講.一個html文檔對應一個window對象. 4  功能上講: 控制瀏覽器窗口的. 5     使用上講: window對象不須要建立對象,直接使用便可.

window 對象方法：

 1 alert() 顯示帶有一段消息和一個確認按鈕的警告框。  2 confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。  3 prompt() 顯示可提示用戶輸入的對話框。  4 
 5 open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。  6 close() 關閉瀏覽器窗口。  7 setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式。  8 clearInterval() 取消由 setInterval() 設置的 timeout。  9 setTimeout() 在指定的毫秒數後調用函數或計算表達式。 10 clearTimeout() 取消由 setTimeout() 方法設置的 timeout。 11 scrollTo()         把內容滾動到指定的座標。

交互方法：

 1 方法講解:  2         //----------alert confirm prompt----------------------------
 3     //alert('aaa');  4     
 5     
 6     /* var result = confirm("您肯定要刪除嗎?");  7     alert(result); */
 8 
 9     //prompt 參數1 : 提示信息. 參數2:輸入框的默認值. 返回值是用戶輸入的內容. 10 
11     // var result = prompt("請輸入一個數字!","haha"); 12     // alert(result); 13 
14 
15 
16  方法講解: 17         //open方法 打開和一個新的窗口 並 進入指定網址.參數1 : 網址. 18         //調用方式1 19             //open("http://www.baidu.com"); 20         //參數1 什麼都不填 就是打開一個新窗口. 參數2.填入新窗口的名字(通常能夠不填). 參數3: 新打開窗口的參數. 21             open('','','width=200,resizable=no,height=100'); // 新打開一個寬爲200 高爲100的窗口 22         //close方法 將當前文檔窗口關閉. 23             //close();

View Code

setInterval clearInterval

 1 <input id="ID1" type="text" onclick="begin()">
 2 <button onclick="end()">中止</button>
 3 
 4 <script>
 5 
 6 
 7  function showTime(){  8            var nowd2=new Date().toLocaleString();  9            var temp=document.getElementById("ID1"); 10            temp.value=nowd2; 11 
12  } 13 
14  var clock; 15 
16  function begin(){ 17 
18         if (clock==undefined){ 19 
20  showTime(); 21              clock=setInterval(showTime,1000); 22 
23  } 24 
25  } 26 
27  function end(){ 28 
29  clearInterval(clock); 30  } 31 
32 </script>

View Code

setTimeout clearTimeout

1 var ID = setTimeout(abc,2000); // 只調用一次對應函數. 2  clearTimeout(ID); 3  function abc(){ 4         alert('aaa'); 5     }

View Code

三、history 對象

History 對象屬性

History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

History 對象是 window 對象的一部分，可經過 window.history 屬性對其進行訪問。

1 length  返回瀏覽器歷史列表中的 URL 數量。

History 對象方法

1 back() 加載 history 列表中的前一個 URL。 2 forward() 加載 history 列表中的下一個 URL。 3 go()    加載 history 列表中的某個具體頁面。

1 <a href="rrr.html">click</a>
2 <button onclick=" history.forward()">>>></button>
3 <button onclick="history.back()">back</button>
4 <button onclick="history.go()">back</button>

Demo

四、Location 對象

Location 對象包含有關當前 URL 的信息。

Location 對象是 Window 對象的一個部分，可經過 window.location 屬性來訪問。

Location 對象方法

1 location.assign(URL) 2 location.reload() 3 location.replace(newURL)//注意與assign的區別