1. 程式人生 > 程式設計 >JavaScript Window瀏覽器物件模型原理解析

JavaScript Window瀏覽器物件模型原理解析

瀏覽器物件模型 (BOM) 使 JavaScript 有能力與瀏覽器"對話"。

瀏覽器物件模型 (BOM)

瀏覽器物件模型(Browser Object Model (BOM))尚無正式標準。

由於現代瀏覽器已經(幾乎)實現了 JavaScript 互動性方面的相同方法和屬性,因此常被認為是 BOM 的方法和屬性。

Window 物件

所有瀏覽器都支援 window 物件。它表示瀏覽器視窗。

所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員。

全域性變數是 window 物件的屬性。

全域性函式是 window 物件的方法。

甚至 HTML DOM 的 document 也是 window 物件的屬性之一:

window.document.getElementById("header");

與此相同:

document.getElementById("header");

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

實用的 JavaScript 方案(涵蓋所有瀏覽器):

例項

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

該例顯示瀏覽器視窗的高度和寬度。

其他 Window 方法

一些其他方法:

  • window.open() - 開啟新視窗
  • window.close() - 關閉當前視窗
  • window.moveTo() - 移動當前視窗
  • window.resizeTo() - 調整當前視窗的尺寸

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。