JS 瀏覽器 BOM 之 JavaScript Window
阿新 • • 發佈：2022-05-09
宣告
該文部分程式碼和內容節選自菜鳥教程，僅用作個人學習，特此宣告
JS 瀏覽器 BOM
瀏覽器物件模型 (Browser Object Model (BOM)) 使 JavaScript 有能力與瀏覽器"對話"，其尚無正式標準
由於現代瀏覽器實現了 JavaScript 互動性方面的相同方法和屬性，因此常被認為是 BOM 的方法和屬性。
JavaScript Window
1、Window 物件
所有瀏覽器都支援 window 物件。它表示瀏覽器視窗。
所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件
的成員。全域性變數是 window 物件的屬性。全域性函式是 window 物件的方法。
HTML DOM 的 document 也是 window 物件的屬性之一
window.document.getElementById("header"); document.getElementById("header");上邊兩行程式碼作用是相同的
2、Window 尺寸
有三種方法能夠確定瀏覽器視窗的尺寸
對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight- 瀏覽器視窗的內部高度(包括滾動條)window.innerWidth- 瀏覽器視窗的內部寬度(包括滾動條)對於 Internet Explorer 8、7、6、5：
document.documentElement.clientHeightdocument.documentElement.clientWidth或者
document.body.clientHeightdocument.body.clientWidth
那麼，有沒有一種涵蓋所有瀏覽器的方法來確定瀏覽器視窗的尺寸呢？
答案是有的。(其實就是用 或 || 進行一個簡單的方法疊加)
如下例項：顯示瀏覽器視窗的高度和寬度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>確定瀏覽器視窗大小練習</title> </head> <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="瀏覽器window寬度: " + w + ", 高度: " + h + "。" </script> </body> </html>
3、其他 Window 方法
一些其他方法：
- window.open() - 開啟新視窗
- window.close() - 關閉當前視窗
- window.moveTo() - 移動當前視窗
- window.resizeTo() - 調整當前視窗的尺寸