1、window對象
2、同源安全策略
3、cookie
瀏覽器對象模型(BOM)是一組從瀏覽器上下文繼承而來的對象,這也是絕大多數 JavaScript應用程序中函數運行的上下文。有時它也被稱之為 DOM Level 0,或者就叫 DOM。
BOM是一組有限的公共 Web對象,也是一個層次化的對象集,每個層次上的對象都可以通過它們的父對象來訪問,比如 window[navigator, location, frames, screen, history, document[forms, cookie, link/anchors, images, embeds/plug-ins, all]]。
訪問對象時,你可以:
var theImage = document.form[0].elements["someelement"].value;
1、window對象
瀏覽器的 window對象封裝了整個瀏覽器環境,包括 window的"chrome"(組成瀏覽器窗體的通用組件)、實際的 Web頁面,以及頁面中的事件。
通過 window可以手動設置瀏覽器狀態條上的狀態,執行打開一個新窗口、重新調整已顯示窗口的大小、關閉窗口等操作。不過隨著動態 Web效果和 Ajax的流行,這種彈出式窗口越來不被喜歡。
window對象的方法和屬性可以分成4類:
a. 創建新窗口,維護現有窗口行為
彈出式對話框:alert、confirm和 prompt
創建自定義窗口:window.open()
維護窗口:通過窗口的引用能夠完成該窗口的維護,要維護父窗口則使用關鍵字 opener,要維護包含當前運行腳本的窗口,則應該使用關鍵字 self。
b. 在窗口中創建帶分區的文檔(幀和iframes)
frame對象定義了以下元素:parent、length和 name。對于跨幀通信而言,name和 parent屬性特別重要。其父元素 frameset(幀集,包括幀的窗口)可以通過每個幀的名字訪問所有子幀(也可以通過幀數組,以對象數量作為索引值);每個幀都可以通過通用的關鍵字 parent來訪問該幀集。兄弟幀元素之間可以通過 parent和對方的 name屬性來訪問。
和標準的幀不一樣,iframe是內嵌在頁面中的。你可以為其指定高度和寬度,如果將它們都設置為0,那么它就將被隱藏起來。iframe會把它嵌入到的頁面視為自己的父元素,這也是它和更高層頁面進行通信的方法。通常,你可以使用 document的 getElementById方法來訪問它,也可以使用 target屬性載入其內容。
c. 定時器的創建和控制
有兩類定時器:一類是一次性的,另一類是周期性使用的。兩種定時器都能取消,一次性定時器方法只會被調用一次。
要想創建一個不重復觸發的定時器,可以使用 setTimeout方法:
var tmOut = setTimeout("func", 5000, "param1", param2,,,,, paramn);
如果想清除這個定時器,可以使用 clearTimeout方法:
clearTimeout(tmOut);
如果你想周期性地使用這個定時器,那么應調用 setInterval方法:
var tmOut = setInterval("functionName", 5000);
同樣,如果想暫?;蛉∠@個周期性定時器,可以使用 clearInterval方法。如果你想實現一個周期性定時器,但又想在參數中指定一個函數文字量,那么你可以在每次定時器過期時再用 setTimeout函數重新設置這個定時器。
注:
在 IE瀏覽器中,setInterval和 setTimeout方法是不支持在最后添加函數調用所需參數的。
d. 用來控制瀏覽器其他元素
history對象
history對象負責維護瀏覽器中頁面載入操作的歷史記錄。同樣,其方法和屬性能夠完成通過瀏覽器的后退和前進按鈕所能實現的導航操作。
screen對象
screen對象所包含的信息是屏幕顯示有相關的,包括其寬度、高度,以及顏色或像素濃淡。雖然他們不是很常用,但他們對于那些需要修改瀏覽器窗口大小、創建需要特定調色板的帶色彩對象等功能而言是不錯的選擇。
navigator對象
navigator對象中提供的是和瀏覽器或其他訪問該頁面的用戶代理相關的信息。通過它可以檢查操作系統、瀏覽器或瀏覽器族、安全策略、語言以及 cookie是否啟用。
document對象
1.鏈接和錨
document對象的 links集合是由頁面中所有超鏈接組成的,它的訪問方法和數組一樣。
2.圖像
和鏈接一樣,圖像也有其對應的對象,也可以直接設置他們的屬性,如表示圖像 URL的 src屬性。
3.innerHTML
使用 innerHTML屬性可以修改頁面中任何一個 HTML元素,它之所以仍然流行,是因為通過它修改頁面元素時無需構建整個頁面的內容,你只需創建一個 HTML格式的字符串,然后通過 innerHTML就可以添加到 Web頁面中。不過,使用 innerHTML意味著無論向 Web頁面添加了什么,他們都無法融合到頁面的 document樹上,因此如果你混合使用 innerHTML和新的 DOM方法將會帶來很大的破壞。
2、同源安全策略
同源安全策略確保了不同域名、協議或端口的頁面之間不能夠通過腳本進行通信。同源安全策略將應用于不同頁面之間的通信,包括父窗口中的表單和內嵌窗口之間的通信,如幀及 iframe。
3、cookie
cookie的意義就是一個帶有過期時間、域名、路徑的小型的鍵/值對,之所以需要提供這些消息,是為了確保正確的服務器能夠讀取到正確的 cookie。這些信息將作為 Web請求的一部分發送,因此在服務器端和瀏覽器都能訪問這些數據。
設置、讀取、刪除 cookie
// if cookie enabled
window.onload = function() {
if (navigator.cookieEnabled) {
var sum = readCookie("sum");
if (sum) {
var iSum = parseInt(sum) + 1;
alert("cookie count is " + iSum);
if (iSum > 5) {
eraseCookie("sum");
} else {
setCookie("sum", iSum);
}
} else {
alert("no cookie, setting now");
setCookie("sum", 0);
}
}
}
// 將 cookie有效期設置為 2016年
function setCookie(key, value) {
var cookieDate = new Date(2016, 11, 10, 19, 30, 30);
document.cookie = key + "=" + encodeURI(value) + "; expires=" + cookieDate.toGMTString() + "; path=/";
}
// 在每個 cookie之前用分號隔開
function readCookie(key) {
var cookie = document.cookie;
var first = cookie.indexOf(key + "=");
// 存在 cookie
if (first >= 0) {
var str = cookie.substring(first, cookie.length);
var last = str.indexOf(";");
// 如果是最后一個 cookie
if (last < 0) last = str.length;
// 獲取 cookie的值
str = str.substring(0, last).split("=");
return decodeURI(str[1]);
} else {
return null;
}
}
// 將 cookie的有效期設置成過去,以達到刪除 cookie的目的
function eraseCookie (key) {
var cookieDate = new Date(2000, 11, 10, 19, 30, 30);
document.cookie = key + "= ; expirse=" + cookieDate.toGMTString() + "; path/";
}
posted on 2010-05-29 21:46
黃小二 閱讀(345)
評論(0) 編輯 收藏 所屬分類:
Ajax