JavaScript 入門教學（七）：控制網址與瀏覽紀錄（window、location、history）

瀏覽器為每個網頁提供一個最上層的物件：window。我們前面用過的 alert()、setTimeout()、document 其實都是它的成員，只是平常可以省略 window. 不寫。本篇介紹和「網址、瀏覽紀錄、視窗」有關的三個常用物件。

一、window 物件：瀏覽器視窗

成員	說明
window.innerWidth／innerHeight	網頁可視區域的寬與高（像素）
window.scrollY	目前往下捲動了多少像素
window.scrollTo(...)	捲動到指定位置
window.open(...)	開啟新視窗或新分頁
window.location	目前網址（可簡寫為 location）
window.history	瀏覽紀錄（可簡寫為 history）

二、location：讀取與改變網址

假設目前網址是 https://example.com/search?q=javascript&page=2#result（範例網址）：

屬性	內容
location.href	完整網址
location.hostname	example.com
location.pathname	/search
location.search	?q=javascript&page=2
location.hash	#result

1. 跳到其他網頁

// 前往新網址，瀏覽器的「上一頁」仍可回到目前頁面
location.href = 'https://example.com/';

// 前往新網址，但不留下目前這一頁的紀錄
location.replace('https://example.com/');

// 重新整理
location.reload();

replace() 適合用在登入完成後的跳轉，使用者按上一頁就不會又回到登入畫面。

2. 解析網址參數

以前常自己用 split 切字串，現在直接用 URLSearchParams 即可。

const params = new URLSearchParams(location.search);
const q = params.get('q');       // 'javascript'
const page = Number(params.get('page') || 1);

console.log(q, page);

如果參數不存在，get() 會回傳 null，所以上面用 || 1 提供預設值。

三、history：瀏覽紀錄

history.back();      // 上一頁，等於按瀏覽器的「上一頁」
history.forward();   // 下一頁
history.go(-2);      // 往回兩頁

<button onclick="history.back()">返回上一頁</button>

基於安全與隱私，JavaScript 無法讀取使用者看過哪些網址，只能「前進」或「後退」。進階的 history.pushState() 可以在不重新載入頁面的情況下改變網址，是單頁式應用（SPA）的基礎，初學階段先知道有這個功能即可。

四、window.open：開新視窗

// 在新分頁開啟，建議加上 noopener 增加安全性
window.open('https://example.com/', '_blank', 'noopener,noreferrer');

// 開啟指定大小的小視窗
window.open('https://example.com/', '_blank', 'width=600,height=400');

• 瀏覽器會封鎖「不是由使用者點擊觸發」的彈出視窗，所以要寫在按鈕的點擊事件裡。
• 連結到外部網站時加上 noopener，可避免新頁面透過 window.opener 操作原本的頁面。
• 過去流行的自動彈出廣告視窗，現在幾乎都被封鎖，也不建議使用。

五、綜合範例：回到頂端按鈕

<button id="topBtn" hidden>回到頂端</button>

<script>
const topBtn = document.getElementById('topBtn');

// 往下捲動超過 300 像素才顯示按鈕
window.addEventListener('scroll', () => {
  topBtn.hidden = window.scrollY < 300;
});

// 點擊後平滑捲回頂端
topBtn.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});
</script>

實際使用時，可再用 CSS 的 position: fixed 把按鈕固定在畫面右下角。

六、已經不能用的舊寫法

早期教材常出現下列用法，現在多半失效或不建議使用，若看到舊程式碼請不要照抄：

• window.status：瀏覽器已不再顯示狀態列文字。
• showModalDialog()：已被主流瀏覽器移除，請改用 <dialog>（見第六篇）。
• 用 frameset 切割畫面：已被 HTML5 淘汰，請改用 CSS 版面。

七、練習題

1. 讀取網址中的 name 參數，顯示「歡迎，○○」；沒有參數時顯示「歡迎，訪客」。
2. 做一個「返回上一頁」與「重新整理」按鈕。
3. 在回到頂端按鈕的範例中，把顯示門檻改成頁面高度的一半。

結語

掌握 location 與 history，就能控制網頁的去向與紀錄；搭配 window.scrollTo，還能改善閱讀體驗。下一篇將介紹表單驗證，讓使用者輸入的資料先在瀏覽器檢查一次。