[Back To Basic] Javascript - Window

BOM(Browser Object Model)

• 瀏覽器物件模型，允許 javascript 和瀏覽器溝通。
• 沒有官方標準
• 大部分現代瀏覽器都已經實作

Window 物件(Object)

• 被所有的瀏覽器支持
• window 代表的就是瀏覽器
• 所有全域的 javascript 物件、方法、變數都是 window 的一部分
• 全域變數(global variables) 是 window 的屬性(properties)
• 全域函式(global functions) 是 window 的方法(methods)

DOM是Window的一部分

視窗大小(window size)

這兩個屬性(properties)可以決定視窗的大小

• window.innerHeight 瀏覽器高度
• window.innerWidth 瀏覽器寬度

註: 這兩個數值不包含滾動條(scrollbar)和工具列(toolbar)的寬、高度

IE瀏覽器

IE8、7、6、5使用以下的屬性

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

跨瀏覽器解決方案

var width = window.innerWidth

    || document.documentElement.clientWidth

    || document.body.clientWidth;

var height = window.innerHeight

    || document.documentElement.clientHeight

    || document.body.clientHeight;

source code