window.onhashchange詳解

隨著前端技術的不斷發展，單頁應用越來越受到歡迎。單頁應用不像傳統網頁應用那樣每次刷新頁面都會向伺服器發送請求以獲取新的頁面內容，而是通過JavaScript來控制網頁內容的更新。

為了支持單頁應用，HTML5引入了兩個API：History和Location。History API用於訪問瀏覽器歷史記錄，Location API用於獲取當前URL信息。

在這兩個API的基礎上，window對象又添加了一個onhashchange事件，它可以監聽hash值的變化，使得單頁應用能夠根據不同的hash值展示不同的頁面內容。

一、基本使用

window.onhashchange = function() {
    console.log("hash值變了");
}

當hash值變化時，console會輸出”hash值變了”。

通常在單頁應用中，我們會根據不同的hash值展示不同的頁面內容。比如，假設我們要實現一個單頁應用，用戶可以通過點擊導航欄來瀏覽不同的頁面內容。

// HTML代碼
<ul id="nav">
    <li><a href="#home">首頁</a></li>
    <li><a href="#about">關於我們</a></li>
    <li><a href="#contact">聯繫我們</a></li>
</ul>

// JavaScript代碼
window.onhashchange = function() {
    var hash = location.hash.slice(1);
    // 根據不同的hash值展示不同的頁面內容
    switch(hash) {
        case 'home':
            // 展示首頁內容
            break;
        case 'about':
            // 展示關於我們頁面內容
            break;
        case 'contact':
            // 展示聯繫我們頁面內容
            break;
        default:
            // 如果hash值不匹配任何頁面，則展示默認頁面內容
            break;
    }
}

當用戶點擊導航欄的某一個鏈接時，hash值會自動改變，觸發onhashchange事件。通過解析hash值，我們就可以動態地展示不同的頁面內容。

二、兼容性問題

onhashchange事件雖然非常方便，但是它並不被所有瀏覽器支持。具體來說，只有IE8及以下版本不支持onhashchange事件，其他主流瀏覽器都支持。

為了解決這個問題，我們可以手動檢測hash值的改變，並在hash值改變時觸發自定義事件。具體來說，我們可以採用setInterval函數來定時檢測hash值是否改變。

var lastHash = location.hash;
setInterval(function() {
    if (location.hash !== lastHash) {
        lastHash = location.hash;
        // 觸發自定義事件
        var hashChangeEvent = new Event('hashchange');
        window.dispatchEvent(hashChangeEvent);
    }
}, 100);

當hash值發生改變時，通過觸發自定義事件來模擬onhashchange事件。這種方法可以在所有瀏覽器中使用。

三、注意事項

在使用onhashchange事件時，需要注意一些細節問題，否則可能會導致程序出現異常。

首先，當hash值改變時，瀏覽器不會刷新頁面，也不會重新載入任何資源。這就意味著，如果程序自身的狀態依賴於某些資源的載入狀態，那麼hash值改變時可能會導致程序出現異常。

比如，假設我們的程序需要根據某個非同步請求返回的數據來渲染頁面。那麼，在hash值改變時，如果這個請求還沒有完成，渲染頁面的代碼就會去訪問一個尚未返回的數據，導致程序崩潰。

為了解決這個問題，我們可以在hash值改變時暫時禁用頁面的交互功能，直到所有必需的資源都載入完成為止。

window.onhashchange = function() {
    disableInteractions();
    loadData(function() {
        // 載入完成後渲染頁面
        renderPage();
        enableInteractions();
    });
}

在上述示例代碼中，disableInteractions()函數和enableInteractions()函數分別用于禁用和啟用頁面的交互功能。loadData()函數用於非同步載入必需的數據。在hash值改變時，我們先調用disableInteractions()函數來禁用頁面的交互功能，然後調用loadData()函數非同步載入必需的數據。等到數據載入完成後，我們再調用renderPage()函數來渲染頁面，並調用enableInteractions()函數來啟用頁面的交互功能。

除了非同步請求的問題之外，我們還需要注意一些其他的細節問題。比如，當hash值發生改變時，頁面滾動位置可能也會發生變化。因此，我們需要在處理hash值改變之前先記錄當前的滾動位置，在處理完成之後再恢復滾動位置。

window.onhashchange = function() {
    var scrollY = window.scrollY;
    // 處理hash值變化
    window.scrollTo(0, scrollY); // 恢復滾動位置
}

在上述示例代碼中，我們使用window.scrollY屬性來記錄當前的滾動位置，在處理hash值變化之後，再使用window.scrollTo函數來恢復滾動位置。

四、小結

本文詳細介紹了window.onhashchange事件，包括基本使用、兼容性問題和注意事項。通過使用window.onhashchange事件，我們可以方便地支持單頁應用。