JavaScript 浏覽器對象模型BOM使用介紹

 BOM也叫做浏覽器對象模型,它提供了很多對象,用於訪問浏覽器的功能;這些功能與任何網頁內容無關;

BOM缺少規范,每個浏覽器提供商都按照自己的想法去擴展它,那麼浏覽器共有對象就成了事實的標准;

一 window對象

1 2 3 4 5 6 7 // BOM的核心對象是window,它表示浏覽器的一個實例; // window對象處於JavaScript結構的最頂層; // 對於每個打開的窗口,系統都會自動為其定義window對象; // window對象同時扮演著ECMAScript中Global對象的角色,因此所有在全局作用域中聲明的變量/函數都會變成window對象的屬性和方法; // PS:嘗試訪問未聲明的變量會拋出錯誤,但是通過查詢window對象,可以知道某個可能未聲明的對象是否存在; var newValue = oldValue; // =>ReferenceError:oldValue is not defined; var newValue = window.oldValue; // =>undefined;

1.window對象的屬性和方法
window對象有一系列的屬性,這些屬性本身也是對象;

(1).屬性
屬性 含義
closed 當窗口關閉時為真;
defaultStatus 窗口底部狀態欄顯示的默認狀態信息;
document 窗口中當前顯示的文檔對象;
frames 窗口中的框架對象數組;
history 保存有窗口最近加載的URL;
length 窗口中的框架數;
location 當前窗口中的URL;
name 窗口名;
offscreenBuffering 用於繪制新窗口內容並在完成後復制已存在的內容,控制屏幕更新;
opener 打開當前窗口的窗口;
parent 指向包含另一個窗口的窗口(由框架使用);
screen 顯示屏幕相關信息,如高度/寬度(以像素為單位;)
self 指示當前窗口;
status 描述由用戶交互導致的狀態欄的臨時信息;
top 包含特定窗口的最頂層窗口(由框架使用);
window 指示當前窗口,與self等效;

(2).方法
alert(text) 創建一個警告對話框,顯示一條信息;
blur() 將焦點從窗口移除;
clearInterval(interval) 清除之前設置的定時器間隔;
clearTimeOut(timer) 清除之前設置的超時;
close() 關閉窗口;
confirm() 創建一個需要用於確認的對話框;
focus() 將焦點移至窗口;
open(url,name,[options]) 打開一個新窗口並返回新window對象;
prompt(text,defaultInput) 創建一個對話框要求用戶輸入信息;
scroll(x,y) 在窗口中滾動到一個像素點的位置;
setInterval(expression,milliseconds) 經過指定時間間隔計算一個表達式;
setInterval(function,millisenconds,[arguments]) 經過指定時間間隔後調用一個函數;
setTimeout(expression,milliseconds) 　　　　　　　在定時器超過後計算一個表達式;
steTimeout(function,milliseconds,[arguments]) 在定時器超過後調用一個函數;
print() 調出打印對話框;
find() 調出查找對話框;
// window下的屬性和方法,可以使用window.屬性、window.方法()或者直接屬性、方法()的調用;
// window.alert(text)=alert(text);

2.系統對話框
浏覽器通過alert()/confirm()和prompt()方法調用系統對話框向用戶顯示信息;
系統對話框與浏覽器中顯示的網頁沒有關系,也不包含HTML;
它們的外觀由操作系統及(或)浏覽器設置決定,而不是由CSS決定;
這幾個方法打開的對話框都是同步和模態的;也就是說,顯示這些對話框的時候代碼會停止運行,而關掉這些對話框後代碼又會恢復執行;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // 彈出警告 alert('警告');   // 確認和取消 if(confirm('請確定或取消'){ // confirm()本身有返回值; alert('您選擇了確定'); // 按確定,返回true值; })else{ alert('您選擇了取消'); // 按取消,返回false值; }   // 輸入提示框 var num = prompt('請輸入一個數字',0); // 第一個參數是文字提示;第二個參數是輸入框模式填充值;並返回輸入框中的值; alert(num); // 將prompt()方法返回的值賦給變量num;並彈出;   // 調用打印及查找對話框 print(); // 打印; 彈出浏覽器打印窗口; find(); // =>boolean;頁面有匹配的查找內容返回true;相對於Ctrl+F;   // 狀態欄 defaultStatus = '狀態欄默認文本'; // 浏覽器底部狀態欄初始默認值; status = '狀態欄文本'; // 浏覽器底部狀態欄設置值;

3.新建窗口(open())

// 使用window.open()方法可以導航到一個特定的URL,也可以打開一個新的浏覽器窗口;
// 它接收四個參數:
// (1).要加載的URL;
// (2).窗口的名稱或窗口目標;
// (3).一個特定字符串;
// (4).一個表示新頁面是否取代浏覽器記錄中當前加載頁面的布爾值;
open('www.baidu.com'); // chrome-search://local-ntp/www.baidu.com;打開失敗;需要添加http://;
open('http://www.baidu.com'); // 新建頁面並跳轉到百度;
open('http://www.baidu.com','搜索引擎'); // 新建頁面 打開百度頁面 並命名窗口;並不會自動跳轉;並且再次調用時只是刷新那個頁面;
open('http://www.baidu.com','_parent'); // 在本頁面打開百度;'_blank'是指定新頁面打開;
// 第三個字符串參數
設置 值 說明
width 數值 新窗口的寬度,不小於100px;
height 數值 新窗口的高度,不小於100px;
top 數值 新窗口的Y坐標,不能是負值;
left 數值 新窗口的X坐標,不能是負值;
location boolean 是否在浏覽器窗口中顯示地址欄;不同浏覽器默認值不同;
menubar boolean 是否在浏覽器窗口顯示菜單欄,默認為no;
resizable boolean 是否通過拖動浏覽器窗口邊框來改變大小;默認no;
scrollbars boolean 如果頁面內容顯示不下,是否顯示滾動條;默認no;
status boolean 是否在浏覽器窗口中顯示狀態欄,默認no;
toolbar boolean 是否在浏覽器中顯示工具欄;默認no;
fullscreen boolean 浏覽器窗口是否最大化;僅IE支持;
open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');

// open()本身返回window對象
var box = open(); // 返回了一個window對象,打開了一個新空白頁面;
box.alert(''); // 然後指定在open()返回的對象打開的新頁面彈窗;

// 字窗口操作父窗口
document.onclick = function(){　　　　　　　　 // 在新的窗口中點擊docuement對象;
opener.document.write('子窗口讓我輸出的!');// 此時在產生它的父窗口會生成文字內容;
}

4.窗口的位置和大小

1 2 3 4 5 6 7 8 9 10 11 12 13 14 (1).窗口的位置 // 用來確定和修改window對象(浏覽器窗口)相對於屏幕的位置: // IE+Safari+Opera+Chrome都提供了screenLeft和screenTop屬性, // Firefox提供了screenX和screeY屬性; // 他們分別表示窗口看相對於屏幕左邊和上邊的位置;   // 確定窗口的位置=>IE alert(screenLeft); // 浏覽器左側離屏幕的距離; // 確定窗口的位置=>Firefox alert(screenX); // 浏覽器左側離屏幕的距離;   // 跨浏覽器的方法 var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX; // 判斷檢測的screenLeft是否是數值,若是則使用screenLeft的值,否則使用screenX的值; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16