JavaScript 瀏覽器物件模型BOM

標籤：架構   代碼   expr   跳轉   css   運算式   利用   stat   function   

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決定;
這幾個方法開啟的對話方塊都是同步和模態的;也就是說,顯示這些對話方塊的時候代碼會停止運行,而關掉這些對話方塊後代碼又會恢複執行;

123456789101112131415161718192021

// 彈出警告  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.視窗的位置和大小

1234567891011121314

(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的值;

 

12345678910111213141516171819202122232425

(2).視窗的大小// 檢測瀏覽器視窗本身及邊框的尺寸:outerWidth和outerHeight;  alert(outerWidth);  alert(outerHeight);// 檢測頁面大小屬性:innerWidth和innerHeight;  alert(innerWidth);  alert(innerHeight);// PS:IE沒有提供當前瀏覽器視窗尺寸的屬性; 在DOM中有提供相關的方法; // 在IE及其他瀏覽器中,提供了:document.documentElement.clientWidth和document.documentElement.clientHeight;來儲存頁面視窗的資訊;// PS:在IE6中,上述屬性在標準模式下才有效;如果是怪異模式,就必須通過document.body.clientWidth和document.body.clientHeight;// 如果是Firefox等瀏覽器,直接使用innerWidth和innerHeight;  var width = window.innerWidth;        // 這裡要加window,因為IE會無效;  var height = window.innerHeight;  if(typeof width != ‘number‘){         // IE6瀏覽器    if(document.compatMode == ‘CSS1Compat‘){ // 判斷是IE6標準模式;使用documentElement;      width = document.documentElement.clientWidth;      height = document.documentElement.clientHeight;    }else{                  // 否則是IE6非標準模式;使用body;      width = document.body.clientWidth;      height = document.body.clientHeight;    }  }  // PS:以上方法可以通過不同瀏覽器取得各自的瀏覽器視窗可視部分的大小;  // document.compatMode可以確定頁面是否處於標準模式;

1234567

// 調整瀏覽器位置;  moveTo(0,0);                 // 移動到(0,0)座標;IE有效;  moveBy(10,10);                // 向下和向右分別移動10px;IE有效; // 調整瀏覽器大小  resizeTo(200,200);              // 調整大小;  resizeBy(200,200);              // 擴充收縮大小;

5.間歇調用和逾時調用
1 // JavaScript是單線程語言,但它允許通過設定逾時值和間歇時間值來調度代碼在特定的時刻執行;
2 // 逾時值:在指定的時間過後執行代碼;
3 // 間隔值:每隔指定的時間就執行一次代碼;

123456789101112

// 逾時調用使用window對象的setTimeout()方法;// 它接受兩個參數:要執行的代碼和毫秒數;  setTimeout(function(){            // 直接使用函數傳入的方法,擴充性好,效能更加;    alert(‘警告!‘);  },1000);// 調用setTimeout()之後,該方法會返回一個數值ID,表示逾時調用;// 這個逾時調用的ID是計劃執行代碼的唯一識別碼,可以通過它來取消逾時調用;// 要取消尚未執行的逾時調用計劃,可以調用clearTimeout()方法並將相應的逾時調用ID作為參數傳遞給它;  var box = setTimeout(function(){       // 將逾時調用的ID賦值給變數box;    alert(‘逾時調用‘);  },1000);  clearTimeout(box);              // 將ID傳入取消調用方法;

123456789101112131415161718

// 間歇調用使用window對象的setInterval()方法;// 它會按照指定的時間間隔重複執行代碼,直至間歇調用被取消或頁面被卸載;// 它接收的參數與setTimeout()相同;  var pox = setInterval(function(){    alert(‘間隔調用‘);  },1000);  clearInterval(pox);              // 取消間歇調用; // 利用setInterval()設定一個5秒的定時器;  var num = 0;                 // 設定起始秒;  var max = 5;                 // 設定終止秒;  setInterval(function(){    num++;                  // 遞增num;    if(num == max){                    clearInterval(this);         // 取消間隔調用,this表示方法本身;一直跟蹤間隔調用的ID;      alert(‘5秒後彈窗‘);    }  },1000);

  

1234567891011121314

// 一般使用逾時調用來類比間隔調用是一種最佳模式;// 因為使用間隔調用需要根據情況來取消ID,並且可能造成同步的一些問題;後一個間歇調用可能會在前一個間歇調用結束之前啟動;  var num = 0;  var max = 5;  function box(){    num++;    if(num == max){      alert(‘5秒後彈窗‘);    }else{      setTimeout(box,1000);          // 隔1秒之後再次執行一個逾時調用;    }  };  setTimeout(box,1000);              // 執行定時器;   // PS:在使用逾時調用時,沒必要跟蹤逾時調用ID,因為每次執行之後,如果不再設定另一個逾時調用,調用就會自動停止;

JavaScript 瀏覽器物件模型BOM