IE9 中的 History.pushState 添加哈希标签

Question

我正在使用 history.js 来支持 IE。但是 History.pushState 在 URL 中附加了额外的#data。如何解决这个问题？

Chrome 网址

http://localhost/shop/contracts-and-deals/mobile-phones?&_dyncharset=ISO-8859-1&_dynSessConf=8052455241245685514&planItemSkuId=&device=phones&contractType=onAccount&_D%3AcontractType=+&manufactureFilter=800005&_D%3AmanufactureFilter=+&_DARGS=%2Fshop%2FmobilePhones%2Fphones%2Ffilters%2FphonesLeftPanel.jsp&_dyncharset=ISO-8859-1&_dynSessConf=8052455241245685514&_D%3AsortFilter=+&sortFilter=most_popular&sort-view=grid&_DARGS=%2Fshop%2FmobilePhones%2Fphones%2Ffilters%2FdeviceTopFilter.jsp

Internet Explorer 网址

http://localhost/shop/contracts-and-deals/mobile-phones#mobile-phones?&_dyncharset=ISO-8859-1&_dynSessConf=8052455241245685514&planItemSkuId=&device=phones&contractType=onAccount&_D%3AcontractType=+&manufactureFilter=800005&_D%3AmanufactureFilter=+&_DARGS=/shop/mobilePhones/phones/filters/phonesLeftPanel.jsp&_dyncharset=ISO-8859-1&_dynSessConf=8052455241245685514&_D%3AsortFilter=+&sortFilter=most_popular&sort-view=grid&_DARGS=/shop/mobilePhones/phones/filters/deviceTopFilter.jsp

在 Internet Explorer 中使用 History.pushState 后附加了额外的 #mobile-phones。

我试过下面的代码。

var url = window.location.pathname;
var urlparts = url.split('/');
var currentState = urlparts[urlparts.length-1];

if(f && f != 'undefined' && f.hasClass('filterParams')) {
    var atgPrefix = "_D%3A";
    var totalParams = b.data;
    var arrayOfParams = totalParams.split("&");
    var paramSize = arrayOfParams.length;
        for(var i = 0; i < paramSize;i++){
            if(arrayOfParams[i].indexOf(atgPrefix) != -1) {
                var inputField = arrayOfParams[i].substring(arrayOfParams[i].indexOf(atgPrefix)+atgPrefix.length).split("=")[0];
                if(totalParams.indexOf("&"+inputField) == -1) {
                    totalParams = totalParams.replace(arrayOfParams[i]+"&",'');
                } else {
                    var atgHiddenFields = totalParams.match(new RegExp(arrayOfParams[i], 'g'));
                    var size = atgHiddenFields.length-1; 
                    for(var j = 0;j < size;j++) {
                        totalParams = totalParams.replace(arrayOfParams[i]+"&",'');
                    }
                }
            }
        }
        b.data = totalParams;
}
if(!($(a).closest('form').is('#colorPicker'))){
    if ( document.location.protocol === 'file:' ) {
        alert('The HTML5 History API (and thus History.js) do not work on files, please upload it to a server.');
    }
    var History = window.History, // Note: We are using a capital H instead of a lower h
    State = History.getState(),
    $log = $('#log');

    // Log Initial State
    History.log('initial:', State.data, State.title, State.url);

    // Bind to State Change
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
        // Log the State
        var State = History.getState(); // Note: We are using History.getState() instead of event.state
        History.log('statechange:', State.data, State.title, State.url);

    });
    History.pushState(b.data, document.title, currentState+"?"+b.data);
}

我也尝试过Using history.pushstate in IE9，但没有成功。

Answer 1

如果我们参考history.js GitHub repository上的官方文档，我们会找到关于这个问题的以下文档。

在 Aims 部分下，我们发现 history.js 解决了 HTML5 浏览器中的差异。

为所有 HTML5 浏览器提供交叉兼容的体验

但对 HTML4 浏览器使用 hash-fallback。

使用 hash-fallback 为所有 HTML4 浏览器提供向后兼容的体验

此处使用术语“HTML5 浏览器”和“HTML4 浏览器”有点用词不当，因为这不是浏览器支持 HTML5 的问题，而是会话历史 API 的实现问题。

检查caniuse page for the session history API 告诉我们 Internet Explorer 10 是第一个实现此 API 的 Internet Explorer 版本，因此对于旧版本 history.js 必须使用哈希回退。 GitHub 存储库的 Browsers: Tested and Working In 部分证实了这一点。

HTML5 浏览器

• 火狐4+
• Chrome 8+
• Opera 11.5+
• Safari 5.0+
• Safari iOS 4.3+

HTML4 浏览器

• IE 6、7、8、9、(10)
• 火狐3
• Opera 10、11.0
• Safari 4
• Safari iOS 4.2、4.1、4.0、3.2

奇怪的是，它似乎在 HTML4 浏览器下列出了 Internet Explorer 10，即使 IE10 确实具有会话历史 API。在我自己的测试中，history.js 确实使用了 IE10 中的会话历史 API，而不是 hash-fallback。我相信这部分文档自 IE10 发布后就没有更新过，指的是 IE10 的预发布版本。

在示例中，我们可以看到在支持会话历史 API 的浏览器中使用 History.pushState 的效果。

www.mysite.com/?state=1

与它在必须使用哈希回退的浏览器中的外观相比。

www.mysite.com/#?state=1&_suid=1

结论

history.js 在 Internet Explorer 9 中的工作方式与预期完全一样。IE9 没有实现会话历史 API，因此 history.js 使用 URL 哈希来替代这个缺失的功能。防止 history.js 附加哈希的唯一方法是不调用 History.pushState 或任何相关 API，除非浏览器支持历史 API。显然，这样做消除了 history.js 提供的大部分好处，但如果你想检测对会话历史 API 的支持，你可以使用 history.js 提供的History.emulated.pushState 属性。

if(!History.emulated.pushState)
{
    //Uses session history API.
}else{
    //Uses hash-fallback.
}