【面向JS--BOM】

BOM(Browser Object Document)即瀏覽器對象模型。

BOM提供了獨立於內容 而與瀏覽器窗口進行交互的對象;

由於BOM主要用於管理窗口與窗口之間的通訊,因此其核心對象是window;

BOM由一系列相關的對象構成,並且每個對象都提供了很多方法與屬性;

JavaScript語法的標準化組織是ECMA,DOM的標準化組織是W3C,而BOM缺乏標準,BOM最初是Netscape瀏覽器標準的一部分。

BOM結構圖
bom

window對象

1.代替ES標準中的Global,充當全局對象
2.封裝了瀏覽器軟件以及窗口的信息

打開窗口:

window.open("url","name")
其中: name屬性是內存中窗口的名稱,在打開窗口時,才賦值
name的默認值: _self _top _blank,也可自定義name屬性
規定: 相同name屬性的窗口只能打開一個,後打開的會替代先打開的

預定義name屬性:
    _self:自動獲取當前窗口的name
    _blank:隨機生成name

打開鏈接(a標籤):

1、替換當前窗口內容,可以後退
    html:<a href="url" [target="_self"]>
    js:window.open("url","_self");
2、替換當前窗口內容,禁止後退
    js:location.replace("url")
3、在新窗口打開,可重複打開多個
    html:<a href="url" target="_blank">
    js:window.open("url","_blank");
4、在新窗口打開,只能打開一個
    html:<a href="url" target="自定義name屬性">
    js:window.open("url","自定義name屬性")

窗口大小:

完整窗口大小: window.outerHeight/outerWidth
文檔顯示區大小: window.innerHeight/innerWidth

調整窗口大小:

1、在打開窗口時:
    var config="top=?,left=?,height=?,width=?";
    window.open("url","name","config")
2、在窗口打開後,調整大小: 
    window.resizeTo(寬,高)
    window.resizeBy(寬的增量,高的增量)

窗口定位:

窗口左上角相對於屏幕左上角的座標: 
     top: window.screenTop|screenY
     left: window.screenLeft|screenX
移動窗口位置: 
    window.moveTo(x,y): 將窗口左上角移動到x,y的位置
    window.moveBy(x的增量,y的增量)

window中封裝的BOM對象

history對象:

封裝當前窗口打開後,成功訪問過的歷史記錄棧

length:返回瀏覽器歷史列表中的 URL 數量。
history.go(n);n爲負數,表示後退n次

另外,用back()和forward()方法可以實現同樣的操作:
  history.back();   後退
  history.forward(); 前進

history.go(-1)和history.back()的區別
  history.go(-1)表示後退與刷新。如數據有改變也隨之改變
  history.back()只是單純的返回到上一頁。    

location對象:

封裝當前窗口正在打開的url完整地址

屬性
    .href 設置或返回完整的 URL。
    .protocol 設置或返回當前 URL 的協議。
    .port 設置或返回當前 URL 的端口號。
    .pathname 設置或返回當前 URL 的路徑部分。
    .host 設置或返回主機名和當前 URL 的端口號。 
    .hostname 設置或返回當前 URL 的主機名。
    .search 設置或返回從問號 (?) 開始的 URL(查詢部分)。
    .hash 設置或返回從井號 (#) 開始的 URL(錨)。

比較
    document.referrer:返回載入當前文檔的文檔的 URL,多用於獲取iframe,script等的路徑

更改當前頁面的url,實現刷新
    location.href=”urf”
    location=”url”

方法
    location.assign(“url”)在當前窗口打開新url
    location.replace(“url”)在當前窗口打開新url,禁止後退
    location.reload(bool)重新加載當前頁面,bool規定是否繞過緩存加載,默認false

navigator對象:

封裝瀏覽器配置信息的對象—-沒有標準!!

.cookieEnabled 判斷是否啓用了cookie
.plugins:封裝了瀏覽器安裝的所有插件信息
判斷是否包含插件
    navigator.plugins[插件名]!==undefined
.userAgent:包含瀏覽器名稱,版本及內核的字符串

screen對象:

獲得顯示設備的分辨率

screen.width/height:獲得屏幕完整分辨率
screen.availWidth/availHeight去掉任務欄後的可用寬高
發佈了85 篇原創文章 · 獲贊 22 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章