javascript - 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 中的刷新问题。这个 hack 对我有用。

在我只在初始页面加载时运行的启动代码中，我这样做:

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 而不是根的情况。这个 hack 似乎可以处理这种情况。

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;
    });
}