[Back To Basic] Javascript - Location

window.location 可以取得現在頁面的 URL，且可導向到新的頁面

• 取得現在頁面的URL: location.href
• 取得網域名稱(domain name): location.hostname
• 取得現在頁面的路徑和檔案名稱: location.pathname
• 取得現在頁面使用的協定: location.protocol
• 導向新的頁面: location.assign('新的URL')
• 取得現在頁面使用的port號: location.port
• 大部分的瀏覽器不會顯示預設的port號

source code

[Back To Basic] Javascript - Screen

• window.screen 包含使用者螢幕的資訊
• window.screen 的 window 可以省略寫成 screen.xxx

screen 的屬性(properties)

• 螢幕寬度: screen.width
• 螢幕高度: screen.height
• 螢幕可視寬度(扣除任務欄、邊框等): screen.availWidth
• 螢幕可視高度(扣除任務欄、邊框等): screen.availHeight
• 顏色深度(單一顏色使用N個 bits):screen.colorDepth
• 螢幕像素深度: screen.pixelDepth

source code

[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