當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

BOM—浏览器对象模型（Browser Object Model）

發布時間：2024/10/12 HTML 92 豆豆

生活随笔收集整理的這篇文章主要介紹了 BOM—浏览器对象模型（Browser Object Model）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?1,javascript? ?組成部分：

　　1.ECMAscript（核心標準）：? ? 定義了基本的語法，比如：if for 數組字符串 ...

　　2.BOM? ：瀏覽器對象模型（Browser Object Model）

2,BOM 的組成部分：

　　1.window對象每一個子窗口對應的又是一個window對象
　　2. screen對象
　　3.location對象
　　4.history對象
　　5.Navigator對象
　　6.定時器（兩種）
　　7.彈框（三種）
　　8. document (DOM-文檔對象模型)

1.1window 對象(表示瀏覽器窗口):

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

所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。

全局變量是 window 對象的屬性。

全局函數是 window 對象的方法。

甚至 HTML DOM 的 document 也是 window 對象的屬性之一

1.2window 尺寸:

查看window尺寸有三種方式適用于不同的情況:

1) w3c標準(適用于老版本ie之外的瀏覽器)

window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度

2) 老版本的IE瀏覽器
?標準模式:
　　document.documentElement.clientHeight)
　　document.documentElement.clientWidth)

?怪異模式（向后兼容）中:
　　document.body.clientHeight
　　document.body.clientWidth

3）如何知道是何種模式?

console.log(document.compatMode)可以查看文檔是以什么方式進行解析的
　　CSS1Compat 標準模式
　　BackCompat 怪異模式

function getScreen(){ //獲取屏幕的可視寬高if (window.innerWidth) { //如果window底下有這個屬性，就用這個， w3c標準return {width : window.innerWidth,height : window.innerHeight}}else{ //老版本IEif(document.compatMode == "CSS1Compat"){ //標準模式return {width : document.documentElement.clientWidth,height : document.documentElement.clientHeight}}else{ //怪異模式return {width : document.body.clientWidth,height : document.body.clientHeight}} }}console.log(getScreen())

1.3 其他 Window 方法

　　?window.open() - 打開新窗口
　　?window.close() - 關閉當前窗口
　　?window.moveTo() - 移動當前窗口
　　?window.resizeTo() - 調整當前窗口的尺寸

2.1 screen 對象(包含有關用戶屏幕的信息)

screen.availWidth - 可用的屏幕寬度
screen.availHeight - 可用的屏幕高度

3.1?location對象(用于獲得當前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面)

　console.log(location.href) //返回（當前頁面的）整個 URL：console.log(location.hash) //hash 哈希值，也叫錨點，比方說a鏈接中的console.log(location.host) // host 設置或返回主機名和當前 URL 的端口號。console.log(location.hostname) // hostname 設置或返回當前 URL 的主機名。console.log(location.pathname) // pathname 設置或返回當前 URL 的路徑部分。console.log(location.port) // port 設置或返回當前 URL 的端口號。console.log(location.protocol) // protocol 設置或返回當前 URL 的協議。console.log(location.search) // search 參數（查詢字符串）設置或返回從問號 (?) 開始的 URL（查詢部分）。// location.href = "http://www.baidu.com"? ? //放到某一個事件中去觸發

4.1?history對象(包含瀏覽器的歷史記錄)

history.back() - 與在瀏覽器點擊后退按鈕相同
history.forward() - 與在瀏覽器中點擊按鈕向前相同 <body><a href="http://www.baidu.com">去百度</a><button>后退</button><button>前進</button><script>var btn1 = document.getElementsByTagName("button")[0];var btn2 = document.getElementsByTagName("button")[1];btn1.onclick = function(){history.back()}btn2.onclick = function(){history.forward()}</script> </body>

5.1 Navigator對象(記錄了瀏覽器的一些信息的對象)

appCodeName 返回瀏覽器的代碼名。

appMinorVersion 返回瀏覽器的次級版本。

appName 返回瀏覽器的名稱。

appVersion 返回瀏覽器的平臺和版本信息。

browserLanguage 返回當前瀏覽器的語言。

cookieEnabled 返回指明瀏覽器中是否啟用 cookie 的布爾值。

cpuClass 返回瀏覽器系統的 CPU 等級。

onLine 返回指明系統是否處于脫機模式的布爾值。

platform 返回運行瀏覽器的操作系統平臺。

systemLanguage 返回 OS 使用的默認語言。

userAgent 返回由客戶機發送服務器的 user-agent 頭部的值。

userLanguage 返回 OS 的自然語言設置。

<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>

6.1 PopupAlert 對象

警告框:alert("文本")

確認框:confirm("文本")

提示框:prompt("文本","默認值")

7.1?Timing 對象

一次性定時器:

　　setTimeout()? ?未來的某時執行代碼;

　　clearTimeout()? ?取消setTimeout();

無限次定時器:

　　setInterval( );
　　clearInterval();

8.1?cookie (用來識別用戶)

有關cookie的例子：

　　名字 cookie:

　　當訪問者首次訪問頁面時，他或她也許會填寫他/她們的名字。名字會存儲于 cookie 中。當訪問者再次訪問網站時，他們會收到類似 "Welcome John Doe!" 的歡迎詞。而名字則是從 cookie 中取回的。

　　密碼 cookie:

　　當訪問者首次訪問頁面時，他或她也許會填寫他/她們的密碼。密碼也可被存儲于 cookie 中。當他們再次訪問網站時，密碼就會從 cookie 中取回。

　　日期 cookie:

　　當訪問者首次訪問你的網站時，當前的日期可存儲于 cookie 中。當他們再次訪問網站時，他們會收到類似這樣的一條消息："Your last visit was on Tuesday August 11, 2005!"。日期也是從 cookie 中取回的。

總結

以上是生活随笔為你收集整理的BOM—浏览器对象模型（Browser Object Model）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。