1、BOM簡介 BOM(瀏覽器對象模型),可以對瀏覽器視窗進行訪問和操作。使用 BOM,開發者可以移動視窗、改變狀態欄中的文本以及執行其他與頁面內容不直接相關的動作。 使 JavaScript 有能力與瀏覽器“對話”。 2、window 對象 window 對象方法: 交互方法: 1 方法講解: 2 ...
1、BOM簡介
BOM(瀏覽器對象模型),可以對瀏覽器視窗進行訪問和操作。使用 BOM,開發者可以移動視窗、改變狀態欄中的文本以及執行其他與頁面內容不直接相關的動作。
使 JavaScript 有能力與瀏覽器“對話”。
2、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
3、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
4、Location 對象
Location 對象包含有關當前 URL 的信息。
Location 對象是 Window 對象的一個部分,可通過 window.location 屬性來訪問。
Location 對象方法
1 location.assign(URL)
2 location.reload()
3 location.replace(newURL)//註意與assign的區別