结论

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浏览器使用哈希回退。

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

使用术语＆＃34; HTML5浏览器＆＃34;和＆＃34; HTML4浏览器＆＃34;这里有点用词不当，因为它不是支持HTML5的浏览器的问题，而是会话历史API的实现。

检查caniuse page for the session history API向我们显示Internet Explorer 10是第一个实现此API的Internet Explorer版本，因此对于旧版本，history.js必须使用hash-fallback。 GitHub存储库中的浏览器：经过测试和工作部分证实了这一点。

HTML5浏览器


Firefox 4 +

Chrome 8 +

Opera 11.5 +

Safari 5.0 +

Safari iOS 4.3 +


HTML4浏览器


IE 6,7,8,9，（10）

Firefox 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，而不是哈希回退。我相信自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.
}

IE9中的History.pushState添加了Hash标记

1 个答案:

结论