BOM知識簡易總結

BOM知識總結

在web中使用JavaScript，BOM（瀏覽器對象模型）是其核心

window對象

JavaScript的全部對象都存在於一個運行環境之中，這個運行環境自己也是對象，稱爲「頂層對象」。
這就是說，JavaScript的全部對象，都是「頂層對象」的下屬。不一樣的運行環境有不一樣的「頂層對象」，在瀏覽器環境中，這個頂層對象就是window對象。

全局做用域

window對象同時扮演ECMAScript中Global對象的角色，所以全部在全局做用域中聲明的變量、函數都會變成window對象的屬性和方法。

全局變量不能經過delete操做符刪除，而直接在window對象上定義的屬性能夠。

窗口的大小和位置

位置

IE、Safari、Opera、Chrome都提供了 screenLeft和screenTop屬性，分別用於表示窗口相對於屏幕左邊和上邊的位置。Firefox則在screenX和screenY屬性中提供相同的窗口位置信息（Safari和Chrome也一樣支持）。

大小

1. window.innerHeight和window.innerWidth
   返回網頁在當前窗口中可見部分的高度和寬度，即「視口」（viewport），單位爲像素。當用戶放大網頁的時候（好比將網頁從100%的大小放大爲200%），這兩個屬性會變小。由於這時網頁的像素大小不變，只是每一個像素佔據的屏幕空間變大了，由於可見部分（視口）就變小了。注意，這兩個屬性值包括滾動條的高度和寬度。

2. window.outerHeight和window.outerWidth
   返回瀏覽器窗口的高度和寬度，包括瀏覽器菜單和邊框，單位爲像素。

計時器

JS是單線程語言，但它容許經過設置超時值和間歇時間來調度代碼在特定的時刻執行。

setInterval

window對象的setInterval方法用來實現一個函數在指定毫秒數的間隔裏重複調用。setInterval返回一個值，這個值能夠傳遞給clearInterval用於取消這個函數的執行。

var num = 0,
    max = 10,
    intervalId;
function incrementNumber() {
    num ++;
    if (num == max){
        clearInterval(intervalId);
        alert('ok');
    }
}
intervalId = setInterval(incrementNumber,500);

setTimeout

window對象的setTimeout方法用來實現一個函數在指定的毫秒數以後運行。setTimeout返回一個值，這個值能夠傳遞給clearTimeout用於取消這個函數的執行。

var num = 0,
    max = 10;
function incrementNumber() {
    num ++;
    if (num < max){
        setTimeout(incrementNumber,500);
    } else {
        alert('ok');
    }
}
setTimeout(incrementNumber,500);

若是以0毫秒的超時時間來調用setTimeout ( ) ，那麼指定的函數不會當即執行。相反，會把它放到隊列中，等到前面處於等待狀態的事件處理程序所有執行完畢後，再「當即」調用它。

frame

window.frames屬性返回一個相似數組的對象，成員爲頁面內全部框架窗口，包括frame元素和iframe元素。window.frames[0]表示頁面中第一個框架窗口，window.frames['someName']則是根據框架窗口的name屬性的值（不是id屬性），返回該窗口。

傳統的frame已被廢棄，由<iframe>所建立的嵌套瀏覽上下文是用它本身的Window對象所表示的。

var iframe = window.getElementsByTagName('iframe')[0];
var iframe_title = iframe.contentWindow.title;

導航和彈出窗口

window.open ( ) 方法既能夠導航到一個特定的URL，也能夠打開一個新的瀏覽器窗口。

這個方法接受四個參數：要加載的URL、窗口目標、一個特性字符串以及一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值。

例如：

var popup = window.open(
  'somepage.html',
  'DefinitionsWindows',
  'height=200,width=200,location=no,resizable=yes,scrollbars=yes'
);

• window.close方法用於關閉當前窗口，通常用來關閉window.open方法新建的窗口。

• window.closed屬性用於檢查當前窗口是否被關閉了。

• 新建立的window對象有一個opener屬性，其中保存着打開它的原始窗口對象

系統對話框

瀏覽器經過alert ( ) 、confirm ( ) 、prompt ( ) 方法能夠調用系統對話框向用戶顯示消息。系統對話框與在瀏覽器中顯示的網頁沒有關係，也不包含HTML。它們的外觀由操做系統及瀏覽器設置決定，而不是由css決定。

這幾個方法打開的對話框都是同步和模態的。顯示這些對話框的時候代碼會中止執行，而關掉這些對話框後代碼又會恢復執行。

1. alert ( ) 這個方法彈出的對話框，只有一個「肯定」按鈕，每每用來通知用戶某些信息。

2. confirm ( ) 會顯示確認與取消按鈕，兩個按鈕可讓用戶決定是否執行給定的操做

3. prompt ( ) 用於提示用戶輸入一些文本

URL的解碼/編碼方法

• decodeURI()

• decodeURIComponent()

• encodeURI()

• encodeURIComponent()

Location對象

Location對象是一個很特別的對象，它既是window對象的屬性，也是document對象的屬性；換句話說window.location和document.location引用的是用一個對象。

window.location === document.location

location對象的用處不僅是表如今它保存着當前文檔的信息，還表如今它將URL解析爲獨立的片斷，讓開發人員能夠經過不一樣的屬性訪問這些片斷。

屬性名	例子	說明
hash	'#contents'	返回URL中的hash(#號後跟零或多個字符)，若是URL中不包含散列，則返回空字符串
host	'www.jikexueyuan.com:80'	返回服務器名稱和端口號
hostname	'www.jikexueyuan.com'	返回不帶端口號的服務器名稱
href	'http:// www.jikexueyuan.com'	返回當前加載頁面的完整URL。而Location對象的toString()方法也返回這個值
pathname	'/my/'	返回URL中的目錄和文件名
port	'8080'	返回URL中制定的端口號。若是URL中不包含端口號，則這個屬性返回空字符串
protocol	'http:'	返回頁面使用的協議。一般是http:或https:
search	'?q=javascript'	返回URL的查詢字符串。這個字符串以問好開頭

儘管location.search返回從問好到URL末尾的全部內容，但卻沒有辦法逐個訪問其中的每一個查詢字符串參數。能夠才用decodeURIComponent來解析

若是調用reload ( ) 時不傳入任何參數，頁面就會以最有效的方式從新加載。

History對象

瀏覽器窗口有一個history對象，用來保存瀏覽歷史，從窗口被打開的那一刻算起。history是window對象的屬性，所以每一個瀏覽器窗口、每一個標籤頁乃至每一個框架，都有本身的history對象與特定的window對象關聯。
history對象提供了一系列方法，容許在瀏覽歷史之間移動。

• back ( ) ：移動到上一個訪問頁面，等同於瀏覽器的後退鍵。

• forward()：移動到下一個訪問頁面，等同於瀏覽器的前進鍵。

• go ( ) ：接受一個整數做爲參數，移動到該整數指定的頁面，好比go(1)至關於forward()，go(-1)至關於back()。

history對象有一個length屬性，保存着歷史記錄的數量。
HTML5爲history提供了兩個新方法，history.pushState ( ) 和history.replaceState ( ) ，用來在瀏覽器歷史中添加和修改記錄。全部主流瀏覽器都支持該方法（包括IE10）。
它們接受三個參數，依次爲:

• state：一個與指定網址相關的狀態對象，popstate事件觸發時，該對象會傳入回調函數。若是不須要這個對象，此處能夠填null。

• title：新頁面的標題，可是全部瀏覽器目前都忽略這個值，所以這裏能夠填null。

• url：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。

它的state屬性保存當前頁面的state對象

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "2.html");
history.state
// { foo: "bar" }

Navigator對象與Screen對象

• Window對象的navigator屬性，指向一個包含瀏覽器相關信息的對象。

• window.screen對象包含了顯示設備的信息。screen.height和screen.width兩個屬性，通常用來了解設備的分辨率。