BOM 與 window物件

window物件提供的屬性有document, frames, history, location, navigator, screen。
可以看到document物件也是屬於window物件的屬性之一。
也就是說BOM包含了DOM
所以，像前面所說的document.querySelector實際上是window.document.querySlector。
而window是全域物件，可以省略不寫。

window物件

每一個獨立瀏覽器視窗的window物件彼此是獨立的。
換言之，每開一個新網頁，原本的變數、屬性並沒有辦法再另外一頁存取。
(但SPA單頁式應用與 localStorage/cookies等情況例外)

與網址列相關的東西: location 與 history

location物件

window.location 物件包含了所有與目前頁面網址相關的資訊

以上這張圖片代表location物件所有的所有屬性。

換頁有兩種方法

Way1. 指定location.href屬性
ex:

1	window.location.href = 'http://www.google.com';

Way2. 用location.replace()方法來做
ex:

1	window.location.replace('http://www.google.com');

以上這兩種換頁的方法相似的地方:
都可以用document.referrer查到前一頁的來源網址。

以上這兩種方法相異的地方:
用location.href指定:
a. 可以透過按下瀏覽器的「上一頁」、「下一頁」進行來回。
b. 瀏覽器的瀏覽紀錄會存前一頁的紀錄。

用location.replace:
a. 無法透過按下瀏覽器的「上一頁」、「下一頁」進行來回。
b. 瀏覽器的瀏覽不會紀錄會存前一頁的紀錄。

history物件

a. window.history物件會記錄使用者目前瀏覽器視窗上顯示過的頁面。
b. 但是，JS不被允許去讀取清單上詳細的網址，
故我們唯一能取得的只有history物件的length屬性，也就只能知道這個瀏覽器切換過幾次頁面。

history物件提供go(), back() 以及 forward()。
ex:

history.go();      // 上一頁
history.forward(); // 下一頁
history.go(-1);    // 上一頁
history.go(1);     // 下一頁

但是，因為無法取得完整得url的完整清單，所以，go()不如back()和forward()有用，
因為，無法掌握使用者會被history導致哪一頁。

Landy Blog

008重新認識JS-Day03-筆記3