JS---BOM

時間 2019-11-18

標籤 bom 欄目 JavaScript 简体版

原文原文鏈接

1 BOM對象css

BOM對象	說明
Window	客戶端JS的頂層對象，每當<body>或者<frameset>標籤出現，Window對象就會被自動建立
Navigator	包含客戶端瀏覽器的信息
Screen	包含客戶端顯示屏的信息
History	包含瀏覽器窗口訪問過的URL
Location	包含當前URL的信息
Document	包含整個HTML文檔，能夠用來訪問頁面中的全部元素

2 Window對象html

　　2.1 Window對象是客戶端JS的最頂層的對象，全部的對象都是它的子對象，即爲全局對象web

　　2.2 每個Window對象都是一個獨立的瀏覽器窗口，對於框架頁面來講，頁面中的每一個框架都有一個Window對象chrome

　　2.3 Window對象的屬性和方法數組

Window對象的屬性	說明
closed	boolean值，檢查窗口是否關閉
defaultStatus	瀏覽器狀態欄中顯示的默認文本
status	當前瀏覽器狀態欄顯示的文本
document	對Document對象的引用
frames[]	Window對象的數組，表明窗口的各個框架
history	表明用戶瀏覽窗口的歷史
location	表明在窗口中顯示的文檔的URL，設置該屬性可使瀏覽器裝載一個新的文檔
name	窗口的名稱，能夠在<a>標籤的target屬性使用
opener	對打開當前窗口的Window對象的引用
parent	若是當前窗口是框架，那麼該值是指包含該框架的父級框架，若是當前窗口是獨立窗口，該值是self
self	自引用屬性，是對當前Window對象的引用
top	對頂級窗的Window對象的引用
window	自引用屬性，是當前Window對象的引用，與self屬性同義

Window對象的方法	說明
alert()/confirm()/prompt()	人機交互的接口方法，供用戶與瀏覽器窗口雙向信息交流
open()/close()	打開/關閉窗口
focus()/blur()	請求/放棄鍵盤焦點
moveBy()/moveTo()	移動窗口
print()	打印窗口內容
resizeBy()/resizeTo()	調整窗口大小，有一些安全性的攻擊，將窗口設置的很是小，瀏覽器或者將窗口移出屏幕，讓用戶注意不到，安全所以爲了防止這種攻擊，瀏覽器會限制不能將窗口移出屏幕或者將窗口設置的很是小app
scrollBy()/scrollTo()	滾動窗口中顯示的文檔
setInterval()/clearInterval	設置/取消重複調用的函數，指定兩次調用之間的間隔
setTimeout()/clearTimeout()	設置/取消在指定的若干毫秒後調用一次某個函數

　　2.4 控制彈出窗口open()方法：window.open(url,name,feature,replace)框架

　　　　url:設置打開窗口中顯示的文檔的URL，若是缺省或者爲」」，那麼新窗口就不顯示任何文檔ide

　　　　name：爲新窗口命名。該名稱能夠做爲標籤<a>和<form>的target屬性值。若是名稱爲已經存在的窗口的名稱，那麼open方法就再也不建立新的窗口，而只返回對指定窗口的引用，　　　　這種狀況，第三個參數將被忽略。

feature：設置新窗口的顯示特性，可選參數

replace：設置是否在窗口的瀏覽歷史中給加載到新頁面的URL建立一個新條目，仍是用它替換瀏覽歷史中的當前條目

open方法的第四個參數只在第二個參數命名的是一個已經存在的窗口時纔有用

open方法的返回值是表明新建立的窗口的window對象，window對象的opener屬性引用的是打開它的窗口。若是當前窗口是由用戶建立的，那它的opener屬性就是null

使用open方法打開新窗口後，可使用close方法關閉窗口，若是在打開窗口內部關閉自身窗口，應該使用window.close();

feature是一個逗號分隔的設置字符串，有以下選項

參數選項	值	說明
fullscreen	yes或者no	表示瀏覽器是否最大化顯示，僅限於IE
height	數值	表示新窗口的高度，不能小於100，
left	數值	表示新窗口的左座標，不能是負值
location	yes或者no	表示是否在瀏覽器窗口顯示地址欄，對ie有效可是即便設置爲no，火狐會出現只讀的地址欄,
menubar	yes或者no	表示是否在瀏覽器窗口顯示菜單欄，默認是no，對ie有效，對火狐不起做用
resizable	yes或者no	表示是否能夠經過拖動瀏覽器窗口的邊框改變其大小，默認是no，對ie有效，對火狐不起做用
scrollbars	yes或者no	表示若是內容在視口中顯示不下，是否容許滾動，默認是no
status	yes或者no	是否在瀏覽器窗口中顯示狀態欄，默認是no，即便值爲yes，火狐也沒有狀態欄，ie有
toolbar	yes或者no	是否顯示工具欄，默認是no
top	數值	新窗口的上座標，不能是負值
width	數值	表示新窗口的寬度，不能小於100

若是瀏覽器的內置屏蔽程序阻止了彈出窗口，那麼window.open()方法就會返回null，所以將window.open方法封裝在一個try-catch語句中，準確檢測彈出窗口是否被屏蔽

2.5 框架之間的通訊

1 當咱們使用Window對象的open方法來建立一個窗口時，新窗口能夠利用opener屬性訪問原窗口，而原窗口經過open方法的返回值訪問新建立的窗口。這樣窗口之間就能夠利用這種關係實現相互控制。

2 使用frameset和frame元素來建立框架集頁面，框架之間經過frames、parent和top以及self屬性訪問窗口中的其餘框架。

3 要訪問窗口中的某個框架時，可使用frames[索引]來訪問具體框架

4 parent屬性來訪問當前框架的直接父級窗口

5 top屬性引用的始終是它的頂級窗口，

6 self屬性始終指向window對象,每一個frame都有一個window對象

7 分析一下下面這句話：window.top.getElementById("topFrame").contentWindow.document.getElementById("topFrame_element")

其中window.top能夠直接到達頂級窗口，經過getElementById方法獲取頂級窗口內的一個id爲topFrame的iframe，可是經過getElementById方法獲取到的只是DOM，並無獲取到該框架的window對象

因此使用contenetWindow屬性來獲取該框架的window對象，而後在獲取其document對象，最後獲取該文檔的元素

2.6 在一個框架中能夠調用另外一個框架中定義的變量和函數

可是應該注意的是雖然在A框架中定義的函數，能夠在B框架中調用，可是函數仍然是在定義它的做用域執行的，而不是在調用它的做用域執行的

main.html代碼：

<frameset rows="160,*">
        <frame src="first.html" name="topFrame" />
        <frameset cols="50%,50%">
            <frame src="second.html" name="leftFrame" />
            <frame src="third.html" name="rightFrame" />
        </frameset>
    </frameset>

first.html代碼：

window.name="first"; function getName(){ alert(window.name); }

　　third.html代碼

window.name="third"; parent.parent.frames[0].getName();//first

　　2.7 窗口位置

屬性

說明

window.screenLeft/window.screenTop

表示窗口相對於屏幕左邊和上邊的位置，

在IE,Opera，Chrome中該屬性是指從屏幕的左邊和上面到頁面可見區域（工具欄與菜單欄不屬於可見區域）的距離，

在Safari中，該屬性是指整個瀏覽器窗口相對於屏幕的座標值

window.screenX/window.screenY

火狐，safari和chrome均支持該屬性，該屬性是指整個瀏覽器窗口相對於屏幕的座標值

沒法在跨越瀏覽器的狀況下獲取窗口左邊和上邊的精確座標，可是，若是咱們使用moveTo和moveBy方法能夠將窗口移動到一個精確的位置，注意的是這個方法在某些瀏覽器中多是唄禁用的，且只對最外層的window對象適用

　　2.8 窗口大小

　　　　因爲IE沒有提升瀏覽器窗口尺寸的屬性，所以，沒法在獲取到瀏覽器窗口的大小，可是能夠獲取頁面視口的大小，同時，經過resizeTo和resizeBy方法能夠調整瀏覽器窗口的大小

屬性	說明
outerWidth/outerHeight	Safari和火狐返回的是瀏覽器窗口的大小，Opera和Chrome返回的是頁面視圖容器的大小,
innerWidth/innerHeight	火狐、Safari、opera、chrome都支持，表示頁面視圖的大小（減去邊框的寬度），
document.documentElement.clientWidth	獲取頁面視口的尺寸信息，在ie6的標準模式下有效，
document.body.clientWidth	在ie6的混雜模式下，使用該屬性能夠獲取頁面視口的尺寸信息

var pageWidth=window.innerWidth; var pageHeight=window.innerHeight; if(typeof pageWidth!="number"){ if(document.compatMode=="CSS1Compat"){//標準模式 pageWidth=document.documentElement.clientWidth; pageHeight=document.documentElement.clientHeigth; }else{ pageWidth=document.body.clientWidth; pageHeight=document.body.clientHeigth; } } alert(pageWidth);

3 Navigator對象

3.1 Navigator對象的屬性

屬性	說明
appName	Web瀏覽器的名稱
appVersion	瀏覽器的版本號和其餘版本信息
userAgent	瀏覽器在它的USER-AGENT HTTP標題中發送的字符串，包括appName和appVersion等信息
appCodeName	瀏覽器的代碼號
Platform	客戶所在的操做系統

3.2 經常使用的檢查瀏覽器的方法

1 特徵檢測：根據瀏覽器是否支持特定的功能來決定操做的方式

用戶不關心瀏覽器的版本，只關心瀏覽器的執行能力

if(document.getElementsByName){ var a=document.getElementsByName("a"); }else{ var a =document.getElementsByTagName("a"); }

2 字符串檢測法

客戶端瀏覽器每次發送http請求時，都會附帶一個user-agent的字符串，故能夠利用該字符串來識別客戶的瀏覽器的類型

IE 6.0的返回字符串：Mozilla/4.0(compatible:MSIE 6.0;Window NT 5.1)

IE 8.0的返回字符串：Mozilla/4.0(compatible:MSIE 8.0;Window NT 6.1; Trident/4.0)

Opera 9.0的返回字符串：Opera/9.00(Window NT 5.1; U;zh-cn)

　　　　　　　　　火狐：Mozilla/5.0 (Windows NT 6.1; rv:21.0) Gecko/20100101 Firefox/21.0

幾種經常使用瀏覽器的檢測：

var u=navigator.userAgent.toLowerCase(); var info={ ie:/msie/.test(u)&&!/opera/.test(u),//
 op:/opera/.test(u), sa:/version.*safari/.test(u), ch:/chrome/.test(u), ff:/gecko/.test(u)&&!/webkit/.test(u) }; info.ff&&alert("火狐");//火狐

3 檢測客戶端的操做系統

Window:Win

Macintosh:Mac

UNIX:X11

Linux：X11和Linux

Navigator.userAgent.indexOf("Win")!=-1//是不是window系統

4 檢測插件

非IE 使用plugins數組，IE使用ActiveXObject類型，並嘗試建立一個特定插件的實例，IE是用COM對象的方式實現插件的，而COM對象使用惟一的標示符來標識，所以要堅持特定的插件，就必須知道COM標識符

function hasPlugin(name){ name=name.toLowerCase(); for(var i=0;i<navigator.plugins.length;i++){ if(navigator.plugins[i].name.toLowerCase().indexOf(name)!=-1){ return true; } } return false; } alert(hasPlugin("Flash"));//火狐返回true，ie返回false
function hasIEPlugin(name){ try{ new ActiveXObject(name); return true }catch(e){ return false; } } alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));//ie返回true，火狐返回false

4 Location和History對象

方位導航是肯定當前瀏覽的URL，由Location對象負責

時間導航是定位用戶的瀏覽歷史，由History對象負責

4.1 Location對象

屬性	說明
href	當前完整的URL
protocol	協議，http：
host	主機名和端口部分，www.css8.cn:80
hostname	主機名，www.css8.cn
port	端口號，80
pathname	當前URL的路徑部分，new/index.html
search	當前URL的查詢部分，?id=123&name=yyy
hash	錨部分，#top

方法：

方法	說明
reload	從新裝載當前文檔
replace	無須建立一個新的歷史記錄，裝載一個新的文檔來替換當前文檔

4.2 History對象

History對象是一個可讀的數組，專門用來記錄用戶的訪問歷史記錄，但爲了包含客戶的隱私權，History對象禁止JS訪問這些信息，

可是又考慮到開發的須要，History對象容許使用length屬性來獲取History對象中URL的數量，

容許經過back，forward和go等方法來訪問History數組中的URL

方法	說明
back	返回前一個URL
forward	訪問下一個URL
go(-/+x)	使用不一樣的參數向前訪問第x個或者向後訪問第x個

5 Screen對象---客戶的屏幕大小，用來表現客戶端的能力，瀏覽器窗口外部的顯示器的信息，下面這幾種屬性是全部瀏覽器都支持的

屬性	說明
availHeight	屏幕的像素高度減去系統部件高度以後獲取的值，不包括任務欄
availWidth	屏幕的像素寬度減去系統部件寬度以後獲取的值，不包括Window的快捷方式欄
colorDepth	瀏覽器分配的顏色數或顏色深度
height	顯示瀏覽器的屏幕高度
width	顯示web瀏覽器的屏幕寬度

window.resizeTo(screen.availWidth,screen.availHeight); //能夠利用screen的某些屬性獲取到用戶屏幕的信息來調整瀏覽器窗口的大小，佔據屏幕的可用空間

相關標籤/搜索

JavaScript

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。