原生js學(xué)習(xí)筆記5——BOM操作

什么是BOM

BOM：Browser Object Model 是瀏覽器對(duì)象模型，瀏覽器對(duì)象模型提供了獨(dú)立與內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動(dòng)的對(duì)象結(jié)構(gòu)，BOM由多個(gè)對(duì)象構(gòu)成，其中代表瀏覽器窗口的window對(duì)象是BOM的頂層對(duì)象，其他對(duì)象都是該對(duì)象的子對(duì)象。

目前主流瀏覽器介紹

  • IE——11: 國內(nèi)用得最多的IE瀏覽器，歷來對(duì)W3C標(biāo)準(zhǔn)支持差。從IE10開始支持ES6標(biāo)準(zhǔn)；
  • Sarafi：Apple的Mac系統(tǒng)自帶的基于Webkit內(nèi)核的瀏覽器，從OS X 10.7 Lion自帶的6.1版本開始支持ES6，目前最新的OS X 10.10 Yosemite自帶的Sarafi版本是8.x，早已支持ES6；
  • Firefox：Mozilla自己研制的Gecko內(nèi)核和JavaScript引擎OdinMonkey。早期的Firefox按版本發(fā)布，后來終于聰明地學(xué)習(xí)Chrome的做法進(jìn)行自升級(jí)，時(shí)刻保持最新；
  • 移動(dòng)設(shè)備上目前iOS和Android兩大陣營分別主要使用Apple的Safari和Google的Chrome，由于兩者都是Webkit核心，結(jié)果HTML5首先在手機(jī)上全面普及（桌面絕對(duì)是Microsoft拖了后腿），對(duì)JavaScript的標(biāo)準(zhǔn)支持也很好，最新版本均支持ES6。

這里為什么沒有說到360瀏覽器、搜狗瀏覽器呢？其實(shí)這一類瀏覽器只是在以上列舉出來的瀏覽器的內(nèi)核基礎(chǔ)上，換了一個(gè)包裝，添加了一些個(gè)性功能而已，本質(zhì)上并沒有什么區(qū)別。

可以操作的BOM對(duì)象

window對(duì)象

所有瀏覽器都支持 window 對(duì)象。它表示瀏覽器窗口。

所有 JavaScript 全局對(duì)象、函數(shù)以及變量均自動(dòng)成為 window 對(duì)象的成員。

全局變量是 window 對(duì)象的屬性。

全局函數(shù)是 window 對(duì)象的方法。

甚至 HTML DOM 的 document 也是 window 對(duì)象的屬性之一：

window.document.getElementById("header");

與此相同：

document.getElementById("header");

window尺寸

有三種方法能夠確定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動(dòng)條）。

對(duì)于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

  • window.innerHeight - 瀏覽器窗口的內(nèi)部高度
  • window.innerWidth - 瀏覽器窗口的內(nèi)部寬度

對(duì)于 Internet Explorer 8、7、6、5：

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth

實(shí)用的 JavaScript 方案（涵蓋所有瀏覽器）：

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

x=document.getElementById("demo");
x.innerHTML="瀏覽器的內(nèi)部窗口寬度：" + w + "，高度：" + h + "。"
</script>

</body>
</html>

該例顯示瀏覽器窗口的高度和寬度：（不包括工具欄/滾動(dòng)條）

除此之外，還有一個(gè)outerWidth和outerHeight屬性，可以獲取瀏覽器窗口的整個(gè)寬高。

其他操作window方法（不常用）

  • window.open() - 打開新窗口
  • window.close() - 關(guān)閉當(dāng)前窗口
  • window.moveTo() - 移動(dòng)當(dāng)前窗口
  • window.resizeTo() - 調(diào)整當(dāng)前窗口的尺寸

navigator

navigator對(duì)象表示瀏覽器的信息，最常用的屬性包括：

  • navigator.appName：瀏覽器名稱；
  • navigator.appVersion：瀏覽器版本；
  • navigator.language：瀏覽器設(shè)置的語言；
  • navigator.platform：操作系統(tǒng)類型；
  • navigator.userAgent：瀏覽器設(shè)定的User-Agent字符串。

window.navigator 對(duì)象在編寫時(shí)可不使用 window 這個(gè)前綴。

示例：

<!DOCTYPE html>
<html>
<body>
<div id="example"></div>

<script>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

</body>
</html>

注意

來自 navigator 對(duì)象的信息具有誤導(dǎo)性，不應(yīng)該被用于檢測(cè)瀏覽器版本，這是因?yàn)椋?/p>

  • navigator 數(shù)據(jù)可被瀏覽器使用者更改
  • 瀏覽器無法報(bào)告晚于瀏覽器發(fā)布的新操作系統(tǒng)

screen

screen對(duì)象表示屏幕的信息，常用的屬性有：

  • screen.width：屏幕寬度，以像素為單位；
  • screen.availWidth：屏幕的可用寬度，以像素為單位
  • screen.height：屏幕高度，以像素為單位；
  • screen.availHeight：屏幕的可用高度，以像素為單位
  • screen.colorDepth：返回顏色位數(shù)，如8、16、24。

window.screen 對(duì)象在編寫時(shí)可以不使用 window 這個(gè)前綴。

<script type="text/javascript">
document.write( "屏幕寬度："+screen.width+"px<br />" );
document.write( "屏幕高度："+screen.height+"px<br />" );
document.write( "屏幕可用寬度："+screen.availWidth+"px<br />" );
document.write( "屏幕可用高度："+screen.availHeight+"px" );
</script>

Location

location對(duì)象表示當(dāng)前頁面的URL信息。例如，一個(gè)完整的URL：

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

可以用location.href獲取:

<script>

document.write(location.href);

</script>

要獲得URL各個(gè)部分的值，可以這么寫:

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

要加載一個(gè)新頁面，可以調(diào)用location.assign()。如果要重新加載當(dāng)前頁面，調(diào)用location.reload()方法非常方便。

示例：加載一個(gè)新頁面

<!DOCTYPE html>
<html>
<head>
<script>
function newDoc()
 {
 window.location.assign("http://www.w3school.com.cn")
 }
</script>
</head>
<body>

<input type="button" value="加載新文檔" onclick="newDoc()">

</body>
</html>

History

history對(duì)象保存了瀏覽器的歷史記錄，JavaScript可以調(diào)用history對(duì)象的back()或forward ()，相當(dāng)于用戶點(diǎn)擊了瀏覽器的“后退”或“前進(jìn)”按鈕。

History Back

history.back() 方法加載歷史列表中的前一個(gè) URL。

這與在瀏覽器中點(diǎn)擊后退按鈕是相同的：

<html>
<head>
<script>
function goBack()
  {
  window.history.back()
  }
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

History Forward

history forward() 方法加載歷史列表中的下一個(gè) URL。

這與在瀏覽器中點(diǎn)擊前進(jìn)按鈕是相同的：

<html>
<head>
<script>
function goForward()
  {
  window.history.forward()
  }
</script>
</head>
<body>

<input type="button" value="Forward" onclick="goForward()">

</body>
</html>

注意

這個(gè)對(duì)象屬于歷史遺留對(duì)象，對(duì)于現(xiàn)代Web頁面來說，由于大量使用AJAX和頁面交互，簡單粗暴地調(diào)用history.back()可能會(huì)讓用戶感到非常憤怒。

新手開始設(shè)計(jì)Web頁面時(shí)喜歡在登錄頁登錄成功時(shí)調(diào)用history.back()，試圖回到登錄前的頁面。這是一種錯(cuò)誤的方法。

任何情況，你都不應(yīng)該使用history這個(gè)對(duì)象了。

拓展

系統(tǒng)對(duì)話框

  • alert()警告框，沒有返回值
  • confirm('提問的內(nèi)容')返回boolean
  • prompt(),輸入框,返回字符串或null

window對(duì)象常用事件

  • onload：當(dāng)頁面加載時(shí)
  • onscroll：當(dāng)頁面滾動(dòng)時(shí)
  • onresize:頁面重新定義大小時(shí)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容