BOM，浏覽器對象模型

一、BOM 

浏覽器對象模型

BOM也叫浏覽器對象模型，它提供了很多對象，用于通路浏覽器的功能。BOM缺少規範，每個浏覽器提供商又按照自己想法去擴充它，那麼浏覽器共有對象就成了事實的标準。是以，BOM本身是沒有标準的或者還沒有哪個組織去标準它。

   1.window對象：

BOM的核心對象是window，它表示浏覽器的一個執行個體，在浏覽器中window對象有雙重角色既是通過javascript通路浏覽器視窗的一個接口，又是ECMAScript規定的Global對象。

window對象處于JavaScript結構的最頂層，對于每個打開的視窗，系統都會自動為其定義 window 對象。

window結構：

window

   |

document   frames   history   location   navigator    screen

window對象有一系列的屬性，這些屬性本身也是對象。詳見w3school的文檔。

window下的屬性和方法，可以使用window.屬性、window.方法()或者直接屬性、方法()的方式調用。例如：window.alert()和alert()是一個意思。

1.系統對話框：

      alert(),confirm(),prompt()方法可以調用系統對話框向使用者顯示消息。顯示這些對話框的時候代碼會停止執行，關掉這些對話框後代碼又會恢複執行。

alert()

該方法接受一個字元串并将其顯示給使用者。該對話框會包含指定的文本和一個"OK"按鈕。主要用來顯示警告資訊

confirm()

确認對話框，顯示包含指定的文本和一個"OK"按鈕以及"Cancel"按鈕。該方法傳回布爾值，true表示單擊了OK，false表示單擊了cancel或者X按鈕

if(confirm("确定嗎？？")){

alert("好！");

}else{

alert("切！");

}

prompt() 

會話框，提示使用者輸入一些文本。顯示包含文本，ok按鈕,cancel按鈕以及一個文本輸入域，以供使用者在其中輸入内容。傳入兩個參數，要顯示給使用者的文本提示和文本輸入域的預設值。

如果使用者單擊OK按鈕，該方法傳回輸入域的值，如果使用者單擊了Cancel或者關閉對話框該方法傳回null.

2、導航和打開視窗

      window.open() 

      使用window.open()方法可以導航到一個特定的URL，也可以打開一個新的浏覽器視窗。它可以接受四個參數：

       參數：

1)要加載的URL

2)視窗目标,架構名

    特殊名：

      _self 目前浏覽器頁面

      _parent 目前頁面父頁面

      _top 目前頁面頂級頁面

      _blank 新頁面

framename 在指定的frame中打開

windowname 指定名字的頁面中打開

3) 一個特定字元串

是用逗号分隔的設定字元串

fullscreen=yes|no|1|0 浏覽器是否顯示全屏模式。預設是沒有的。在全屏模式下的 window，僅限IE浏覽器

width=pixels 視窗的寬度.最小.值為100

height=pixels 視窗的高度。最小.值為100

left=pixels 該視窗的左側位置

location=yes|no|1|0 是否顯示位址字段.預設值是yes

menubar=yes|no|1|0 是否顯示菜單欄.預設值是yes

resizable=yes|no|1|0 是否可調整視窗大小.預設值是yes

scrollbars=yes|no|1|0 是否顯示滾動條.預設值是yes

status=yes|no|1|0 是否要添加一個狀态欄.預設值是yes

titlebar=yes|no|1|0 是否顯示标題欄.被忽略，除非調用HTML應用程式或一個值得信賴的對話框.預設值是yes

toolbar=yes|no|1|0 是否顯示浏覽器工具欄.預設值是yes

top=pixels 視窗頂部的位置.僅限IE浏覽器

4)表示新頁面是否取代浏覽器曆史記錄中目前加載頁面的布爾值

如果傳遞了第二個參數，而且該參數是已有視窗或架構的名稱，就會在具有該名稱的視窗或架構中加載第一個參數指定的URL。

  如果給window.open傳遞的第二個參數并不是一個已經存在的視窗或架構，那麼該方法就會根據在第三個參數位置上傳入的字元串建立一個新視窗或新标簽頁

open('http://www.baidu.com'); //建立頁面并打開百度

open('http://www.baidu.com','baidu'); //建立頁面并命名視窗并打開百度

open('http://www.baidu.com','_parent'); //在本頁視窗打開百度,_blank是建立

open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');

  調整視窗大小

        //調整到100*100

      resizeTo(100,100);//接受浏覽器視窗的新高度和新寬度

      //調整到200*150

      resizeBy(100,50); //接受新視窗與原視窗的寬度和高度之差

      移動窗體

      多用于建立窗體

      window.moveTo(0,0); 接受的是新位置的x和y坐标值

      window.moveBy(0,100);接受的是在水準和垂直方向上移動的像素值。

      滾動條

      scrollBy(xnum,ynum) 方法可把内容滾動指定的像素數。注意： 要使此方法工作 window 滾動條的可見屬性必須設定為true！

      scrollTo(xpos,ypos) 方法可把内容滾動到指定的坐标。

例如：

建立新窗體

   var w = window.open("http://www.baidu.com","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");

   改變窗體大小

w.resizeTo(400,200);

    3.視窗位置

      screenLeft和screenTop屬性傳回視窗相對于螢幕的X和Y坐标。(火狐浏覽器不支援)

      screenX和screenY屬性傳回視窗相對于螢幕的X和Y坐标。(ie8及以下浏覽器不支援)

      pageXOffset 設定或傳回目前頁面相對于視窗顯示區左上角的 X 位置。

      pageYOffset 設定或傳回目前頁面相對于視窗顯示區左上角的 Y 位置。

      IE8及更早IE版本不支援該屬性,但可以使用 "document.body.scrollLeft" 和 "document.body.scrollTop" 屬性 。

//跨浏覽器的方法

var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;

var topY = (typeof screenTop == 'number') ? screenTop : screenY;

    4.視窗大小

      innerWidth 頁面視圖區的寬度

      innerHeight 頁面視圖區的高度

      outerWidth 浏覽器視窗的寬度

      outerHeight 浏覽器視窗的高度

      所有主流浏覽器都支援innerWidth,innerHeight,outerWidth,outerHeight 屬性。注意：IE8及更早IE版本不支援這些屬性。

    5. screen對象（詳見w3c的js screen對象）

    螢幕總寬度/高度: 

screen.width

screen.height

可用寬度/高度: 

screen.availWidth

screen.availHeight

顔色深度: 

screen.colorDepth

顔色分辨率: 

screen.pixelDepth

    6.間歇調用和逾時調用

JavaScript是單線程語言，但它允許通過設定逾時值和間歇時間值來排程代碼在特定的時刻執行。前者在指定的時間過後執行代碼，而後者則是每隔指定的時間就執行一次代碼。

逾時調用需要使用window對象的setTimeout()方法，它接受兩個參數：要執行的代碼和毫秒數的逾時時間。

1) setTimeout();

  該方法傳回一個數值ID，表示逾時調用，這個逾時調用ID是計劃執行代碼的唯一辨別符通過它來取消逾時調用。可以通過clearTimeout(ID);

參數：

1.要執行的代碼

2.以毫秒表示的時間。

例如: 

一秒後調用

var id = setTimeout(function(){

alert(1000);

},1000);

console.log(id);

//清除

clearTimeout(id);

2) setInterval();

  按照指定的時間間隔重複執行代碼，直到間歇調用被取消或頁面被解除安裝。調用該方法也會傳回一個間歇調用ID，該ID可以使用者在将來某個時刻取消間歇調用

  參數：

  1.要執行的代碼

  clearInterval(ID);  //取消間歇調用

3) 使用逾時調用來模拟間歇調用

var num = 0;

var max = 10;

function incrementNum(){

num ++;

if(num < max){

alert(num);

setTimeout(incrementNum,500);

alert("Done"+num);