javascript - IE9中的History.pushState添加Hash标签

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 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 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的官方文档，我们将找到有关此问题的以下文档。

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

Provide a cross-compatible experience for all HTML5 Browsers

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

Provide a backwards-compatible experience for all HTML4 Browsers using a hash-fallback

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

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

HTML5 Browsers

• Firefox 4+
• Chrome 8+
• Opera 11.5+
• Safari 5.0+
• Safari iOS 4.3+

HTML4 Browsers

• IE 6, 7, 8, 9, (10)
• Firefox 3
• Opera 10, 11.0
• Safari 4
• Safari iOS 4.2, 4.1, 4.0, 3.2

奇怪的是，尽管 IE10 确实具有 session 历史记录 API，但它似乎在 HTML4 浏览器下列出了 Internet Explorer 10。在我自己的测试中，history.js 确实使用了 IE10 中的 session 历史 API，而不是哈希回退。我相信这部分文档自 IE10 发布以来就没有更新过，并且指的是 IE10 的预发布版本。

在示例中，我们可以看到使用 History.pushState 在支持 session 历史记录 API 的浏览器中的外观。

www.mysite.com/?state=1

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

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

结论

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

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