JavaScript Window瀏覽器對(duì)象模型原理解析
瀏覽器對(duì)象模型 (BOM) 使 JavaScript 有能力與瀏覽器"對(duì)話"。
瀏覽器對(duì)象模型 (BOM)
瀏覽器對(duì)象模型(Browser Object Model (BOM))尚無正式標(biāo)準(zhǔn)。
由于現(xiàn)代瀏覽器已經(jīng)(幾乎)實(shí)現(xiàn)了 JavaScript 交互性方面的相同方法和屬性,因此常被認(rèn)為是 BOM 的方法和屬性。
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 尺寸
有三種方法能夠確定瀏覽器窗口的尺寸。
對(duì)于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 瀏覽器窗口的內(nèi)部高度(包括滾動(dòng)條)
window.innerWidth - 瀏覽器窗口的內(nèi)部寬度(包括滾動(dòng)條)
對(duì)于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
實(shí)用的 JavaScript 方案(涵蓋所有瀏覽器):
實(shí)例
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
該例顯示瀏覽器窗口的高度和寬度。
其他 Window 方法
一些其他方法:
- window.open() - 打開新窗口
- window.close() - 關(guān)閉當(dāng)前窗口
- window.moveTo() - 移動(dòng)當(dāng)前窗口
- window.resizeTo() - 調(diào)整當(dāng)前窗口的尺寸
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 使用JavaScript獲取掃碼槍掃描得到的條形碼的思路代碼詳解
- 基于javascript處理二進(jìn)制圖片流過程詳解
- 使用JavaScript實(shí)現(xiàn)網(wǎng)頁秒表功能(含開始、暫停、繼續(xù)、重置功能)
- JavaScript監(jiān)聽鍵盤事件代碼實(shí)現(xiàn)
- JavaScript forEach中return失效問題解決方案
- 基于JavaScript或jQuery實(shí)現(xiàn)網(wǎng)站夜間/高亮模式
- JavaScript類的繼承多種實(shí)現(xiàn)方法
- JavaScript裝箱及拆箱boxing及unBoxing用法解析
相關(guān)文章
模擬用戶點(diǎn)擊彈出新頁面不會(huì)被瀏覽器攔截
window.open被瀏覽器攔截導(dǎo)致頁面無法彈出,a標(biāo)簽的彈出就不會(huì)被瀏覽器攔截,下面有個(gè)不錯(cuò)的示例,大家可以學(xué)習(xí)下2014-04-04JS中如何實(shí)現(xiàn)點(diǎn)擊a標(biāo)簽返回頁面頂部的問題
這篇文章主要介紹了JS中實(shí)現(xiàn)點(diǎn)擊a標(biāo)簽返回頁面頂部的問題,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-01-01js模擬如何實(shí)現(xiàn)重載以及默認(rèn)參數(shù)
這篇文章主要介紹了js模擬如何實(shí)現(xiàn)重載以及默認(rèn)參數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05JavaScript實(shí)現(xiàn)多維數(shù)組的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)多維數(shù)組的方法,有需要的朋友可以參考一下2013-11-11微信小程序使用checkbox顯示多項(xiàng)選擇框功能【附源碼下載】
這篇文章主要介紹了微信小程序使用checkbox顯示多項(xiàng)選擇框功能,涉及相關(guān)事件綁定與元素遍歷操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12Js中使用hasOwnProperty方法檢索ajax響應(yīng)對(duì)象的例子
這篇文章主要介紹了Js中使用hasOwnProperty方法檢索ajax響應(yīng)對(duì)象的例子,本文介紹的技巧就是hasOwnProperty方法在ajax請(qǐng)求中的使用,需要的朋友可以參考下2014-12-12javaScript canvas實(shí)現(xiàn)(畫筆大小 顏色 橡皮的實(shí)例)
下面小編就為大家分享一篇javaScript canvas實(shí)現(xiàn)(畫筆大小 顏色 橡皮的實(shí)例),具有很好的參考價(jià)值,希望對(duì)大家有所幫助2017-11-11