瀏覽器對象模型 (BOM)
https://github.com/stone0090/javascript-lessons/tree/master/2.1-BOM
ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那麽 BOM（瀏覽器對象模型）則無疑才是真正的核心。BOM 提供了很多對象，用於訪問瀏覽器的功能，這些功能與任何網頁內容無關。多年來，缺少事實上的規範導致 BOM 有很多問題，因為瀏覽器提供商會按照各自的想法隨意去擴展它。W3C 為了把瀏覽器中 JavaScript 最基本的部分標準化，已經將 BOM 的主要方面納入了 HTML5 的規範中。
1、Window 對象
BOM 的核心對象是 windowwindow 對象有雙重角色，它既是通過 JavaScript 訪問瀏覽器窗口的一個接口，又是 ECMAScript 規定的 Global 對象。這意味著在網頁中定義的任何一個對象、變量和函數，都以 window 作為其 Global 對象，因此有權訪問 isNaN()、isFinite()、parseInt()、parseFloat() 等方法。
所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。
所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。
全局變量是 window 對象的屬性。
全局函數是 window 對象的方法。
甚至 HTML DOM 的 document 也是 window 對象的屬性之一：window.document.getElementById("header");
2、Window 尺寸
有三種方法能夠確定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。
對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
- window.innerHeight - 瀏覽器窗口的內部高度
- window.innerWidth - 瀏覽器窗口的內部寬度
對於 Internet Explorer 8、7、6、5：
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth
1 var w=window.innerWidth 2 || document.documentElement.clientWidth 3 || document.body.clientWidth; 4 5 var h=window.innerHeight 6 || document.documentElement.clientHeight 7 || document.body.clientHeight;
3、其他 Window 方法
- window.open() - 打開新窗口
- window.close() - 關閉當前窗口
- window.moveTo() - 移動當前窗口
- window.resizeTo() - 調整當前窗口的尺寸
4、window.screen對象
該對象包含有關用戶屏幕的信息可用屏幕的高度:window.screen.availWidth;
可用屏幕的寬度:window.screen.availHeight;
註:返回訪問者屏幕的寬高都是以像素計,減去界面特性,比如窗口任務欄等
5、window.location對象
該對象用於獲得當前頁面的地址(URL),並把瀏覽器重定向到新的頁面
location.hostname 返回web主機的域名
location.pathname返回當前頁面的路徑和文件名
locaton.port返回web主機的端口(80or443)
location.protocl返回所使用的web協議(http://或https://)
location.href返回當前頁面的url
location.assign(url)方法加載新的文檔,類似與跳轉到新的頁面
| 屬性名 | 例子 | 說明 |
|---|---|---|
| hash | "#contents" | 返回 URL 中的 hash（#號後跟零或多個字符），如果 URL 中不包含散列，則返回空字符串 |
| host | "shijiajie.com:80" | 返回服務器名稱和端口號（如果有） |
| hostname | "shijiajie.com" | 返回不帶端口號的服務器名稱 |
| href | "http:/shijiajie.com" | 返回當前加載頁面的完整URL。而 location 對象的 toString() 方法也返回這個值 |
| pathname | "/WileyCDA/" | 返回URL中的目錄和（或）文件名 |
| port | "8080" | 返回 URL 中指定的端口號。如果 URL 中不包含端口號，則這個屬性返回空字符串 |
| protocol | "http:" | 返回頁面使用的協議。通常是 http: 或 https: |
| search | "?q=javascript" | 返回URL的查詢字符串。這個字符串以問號開頭 |
6、window.History對象
history.back() 與在瀏覽器點擊後退按鈕相同
history.forward() 與在瀏覽器中點擊按鈕向前想聽
history.go(-1);後退一頁
7、window.navigator
Navigator 對象的屬性
- appCodeName 返回瀏覽器的代碼名
- appName 返回瀏覽器的名稱
- appVersion 返回瀏覽器的平臺和版本信息
- browserLanguage 返回當前瀏覽器的語言
- cookieEnabled 返回指明瀏覽器中是否啟用 cookie 的布爾值
- cpuClass 返回瀏覽器系統的 CPU 等級
- onLine 返回指明系統是否處於脫機模式的布爾值
- platform 返回運行瀏覽器的操作系統平臺
- systemLanguage 返回 OS 使用的默認語言
- userAgent 返回由客戶機發送服務器的 user-agent 頭部的值
- userLanguage 返回 OS 的自然語言設置
瀏覽器對象模型 (BOM)