在ie9及以下使用History.js時，頁面刷新會返回主頁

Question

我已經構建了一個使用History.js插件的站點，使用AJAX在頁面之間導航，並相應地更新URL。 一切都運行良好，除了IE; 當您刷新頁面時，它實際上會加載您來到的第一頁的內容，而不是當前頁面內容。 在“體面”的瀏覽器中，它不會從任何頁面加載內容，它只是加載該URL的整個頁面，這是我應該做的IE。

我在想它不知道如何處理哈希。 如果你訪問http://www.crownacre.voyced.com/contact-us/它工作正常，但當你訪問http://www.crownacre.voyced.com/#contact-us/ （與哈希）它沒有。

如果在路徑名中檢測到＃，我試圖重定向頁面，但是沒有辦法將其檢測為window.location.pathname和History.getHash（）返回沒有任何哈希的路徑。

有什么建議？ 我看過一些網站使用這個插件有同樣的問題，這里有類似的問題，但沒有解決方案。

提前致謝！

Answer 1

我在重寫tarheelreader.org時遇到了同樣的問題。 我正在使用History.js，除了IE8中的刷新問題外它工作正常。 這個黑客正在為我工​​作。

在我的啟動代碼中，只運行初始頁面加載我做：

var url = window.location.href;
if (url.indexOf('#') > -1) {
    // ie refresh hack
    controller.stateChange();
}

其中controller.stateChange()是我用於所有歷史記錄更改的狀態更改處理程序。

function stateChange() {
    // handle changes in the URL
    var hist = History.getState(),
        url = hist.url,
        context = hist.data;
    renderUrl(url, context).then(function(title) {
        document.title = title;
    });
}

您可以在https://github.com/gbishop/TarHeelReaderTheme中查看main.js和controller.js中的所有代碼。

編輯進一步探索導致History.js使用初始URL而不是root的情況。 這個黑客似乎處理了這種情況。

function stateChange() {
    // handle changes in the URL
    var hist = History.getState(),
        url = hist.url,
        bar = window.location.href,
        context = hist.data;
    //console.log("State changed...", url, context);
    if (url != bar && bar.indexOf('#') > -1) {
        //console.log('bar = ', bar);
        // I think we only get here in IE8
        // hack for hash mode urls
        var root = History.getRootUrl(),
            hashIndex = bar.indexOf('#');
        if (root != bar.slice(0, hashIndex)) {
            // try to fix the url
            url = root + bar.slice(hashIndex);
            //console.log('new url =', url);
            window.location.href = url;
        }
    }
    renderUrl(url, context).then(function(title) {
        document.title = title;
    });
}

Answer 2

這對我有用：

<script>
    var url = new String(document.location);
    if (url.indexOf("#") > -1) {
        alert("There is a Hash in the path");
    }
</script>

編輯：

function LocationTest()
{
    var loc = window.location;
    alert(loc.href);
    alert(loc.protocol + "//" + loc.host + loc.pathname + loc.search + loc.hash);
    alert(loc.href == loc.protocol + "//" + loc.host + loc.pathname + loc.search + loc.hash);
}

示例源： window.location解釋

Answer 3

也許是一個解決方案：你可以試試我的前叉的History.js非官方版本1.8a2： https ： //github.com/andreasbernhard/history.js

......並提供反饋意見？ 非常感謝你！