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

Question

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

Chrome URL

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 URL

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中使用#mobile-phones后附加额外的History.pushState。

我试过了下面的代码。

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

我也试过用history.pushstate在IE9中的应用，但没有运气。

Answer 1

如果我们参考history.js GitHub存储库上的正式文档，我们将找到关于这个问题的以下文档。

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

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

但对HTML4浏览器使用哈希回退。

使用散列回退为所有HTML4浏览器提供向后兼容的体验。

这里使用"HTML5浏览器“和"HTML4浏览器”这两个术语有点不恰当，因为这不是一个支持HTML5的浏览器的问题，而是会话历史API的实现问题。

检查会话历史API的caniuse页面显示Internet 10是实现此API的Internet的第一个版本，因此对于较早的版本，history.js必须使用散列回退。浏览器:在GitHub存储库的部分进行测试和工作证实了这一点。

HTML5浏览器

• 火狐4+
• 铬8+
• Opera 11.5+
• 野生动物5.0+
• 野生动物园iOS 4.3+

HTML4浏览器

• IE 6、7、8、9、(10)
• Firefox 3
• 歌剧10，11.0
• 狩猎4
• Safari iOS 4.2，4.1，4.0，3.2

奇怪的是，它似乎在HTML4浏览器下列出了10，尽管IE10确实有会话历史API。在我自己的测试中，history.js确实使用了IE10中的会话历史API，而不是散列回退。我相信，自IE10发布以来，这部分文档还没有更新，并提到了IE10的预发布版本。

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

www.mysite.com/?state=1

相对于它在浏览器中的外观，浏览器必须使用散列回退。

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

总结

history.js在Internet 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.
}