【JS】第8章 BOM(瀏覽器對象模型)

一、window 對象

在瀏覽器中,window 對象有雙重角色,它既是通過 JS 訪問瀏覽器窗口的一個接口,又是 ECMAScript 規定的 Global 對象。這意味着在網頁中定義的任意一個對象、變量和函數,都以 window 作爲其 Global 對象。

1. 全局作用域:

  • 全局變量不能通過 delete 操作符刪除,而直接在 window 對象上定義的屬性可以。
  • 嘗試訪問未聲明的變量會報錯,但是通過查詢 window 對象,可以知道某個可能未聲明的變量是否存在。

2. 窗口關係及框架:

如果網頁中包含框架(frameset、frame),則每個框架都擁有自己的 window 對象,並且保存在 frames 集合中。在 frames 集合中,可以通過數值索引(從 0 開始,從左到右,從上到下)或者框架名稱來訪問相應的 window 對象。

  • top 對象,始終指向最高(最外)層的框架,也就是瀏覽器窗口。
  • parent 對象,始終指向當前框架的直接上層框架。
  • self 對象,始終指向 window 對象。
  • top 對象、parent 對象 和 self 對象 都是 window 對象的屬性,可以通過 window.parent、window.top、window.self 等形式來訪問。
// 訪問框架的方法
window.frames[index];
window.frames[name];
top.frames[index];
top.frames[name];
frames[index];
frames[name];

3. 窗口位置:

獲取窗口位置的 window 對象的屬性:

  • window.screenLeft、window.screenTop(IE、Safari、Opera 和 Chrome)
  • window.screenX、window.screenY(Firefox)

改變窗口位置的 window 對象的方法:

  • window.moveBy() 接收的是在水平和垂直方向上移動的像素數,以右和下爲正。
  • window.moveTo() 接收的是新位置的 x 和 y 的座標值。

4. 窗口大小:

獲取窗口大小的 window 對象的屬性:window.innerWidth、window.innerHeight、window.outerWidth、window.outerHeight

獲取窗口大小的 document 對象的屬性:document.documentElement.clientWidth、document.documentElement.clientHeight

改變窗口大小的 window 對象的方法:window.resizeBy()、window.resizeTo()

5. 導航和打開窗口:

  • window.open():4個參數爲要加載的URL、窗口目標、一個表示窗口特性的字符串 以及 一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值。
  • wroWin.close():僅適用於通過 window.open() 打開的彈出窗口。
  • 新打開的 window 對象有一個 opener 屬性,其中保存着打開它的原始窗口對象。
wroWin.opener == window;  // true

6. 間歇調用和超時調用:

  • setTimeout(function,interver)、clearTimeout(),setTimeout() 函數中的 this 在非嚴格模式下指向 window 對象,在嚴格模式下是 undefined。
  • setInterval(function,interver)、clearInterval(),setInterval() 函數中的 this 同上。

7. 系統對話框:

  • alert()、confirm()、prompt()
  • window.print()、window.find()

二、location 對象

location 對象提供了當前窗口中加載的文檔有關的信息,還提供了一些導航功能。它既是 window 對象的屬性,也是 document 對象的屬性。

1. location 對象的屬性:

hash(hash)、host(服務器名稱和端口)、hostname(服務器名稱)、href(完整URL)、pathname(目錄和文件名)、port(端口)、protocol(協議)、search(查詢字符串)

2. location 對象的方法:

  • location.assign(url):改變瀏覽器的位置

       等價於 window.location = url

       等價於 location.href = url

  • location.replace()
  • location.reload()

三、navigator 對象

navigator 對象提供了與瀏覽器有關的信息。

1. navigator 對象的屬性:

navigator 對象的屬性通常用於檢測顯示網頁的瀏覽器類型。

navigator.plugins、navigator.onLine

2. navigator 對象的方法:navigator.registerContentHandler()、navigator.registerProtocolHandler()

四、screen 對象

screen 對象保存着與客戶端顯示器有關的信息。

1. screen 對象的屬性:screen.availWidth、screen.availHeight、screen.width、screen.height

五、history 對象

history 對象爲訪問瀏覽器的歷史記錄開了一個小縫隙。

1. history 對象的屬性:history.length,表示保存的歷史記錄的數量

2. history 對象的方法:history.go()、history.back()、history.forward()

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章