Question

IE中不支持

history.pushstate()。在IE中有没有其他方法可以实现这一目标？

Answer 1

考虑使用或改编GitHub中的History.js。根据描述：

History.js优雅地支持 HTML5历史/状态API（pushState， allState，onPopState）浏览器。包括持续的支持对于数据，标题，replaceState。支持jQuery，MooTools和原型。对于HTML5浏览器表示您可以修改URL 直接，无需使用哈希了。对于HTML4浏览器将恢复使用旧的 onhashchange功能。

IE（upto包括9），不支持pushstate（）。 IE 10支持它。

http://caniuse.com/#search=pushstate

Answer 2

考虑对不受支持的浏览器使用历史记录API，或查看https://github.com/devote/HTML5-History-API

上的库

此Javascript库为旧版浏览器提供HTML5 History API模拟。

库根据W3C规范运行，不添加任何新的或不兼容的方法。该库可以完全按照描述使用，例如，在Dive Into HTML5 book http://diveintohtml5.info/history.html或History API Specification http://www.w3.org/TR/html5/history.html#the-history-interface中。

在纯JS上下文中使用库的示例：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="history-2.0.4.js"></script>
        <script type="text/javascript">
            window.onload = function() {

                // function for the reference is processed
                // when you click on the link
                function handlerAnchors() {
                    // keep the link in the browser history
                    history.pushState( null, null, this.href );


                    // here can cause data loading, etc.


                    // do not give a default action
                    return false;
                }

                // looking for all the links
                var anchors = document.getElementsByTagName( 'a' );

                // hang on the event, all references in this document
                for( var i = 0; i < anchors.length; i++ ) {
                    anchors[ i ].onclick = handlerAnchors;
                }

                // hang on popstate event triggered
                // by pressing back/forward in browser
                window.onpopstate = function( e ) {

                    // we get a normal Location object

                    /*
                    * Note, this is the only difference when using this library,
                    * because the object document.location cannot be overriden, so
                    * library the returns generated "location" object within an
                    * object window.history, so get it out of "history.location".
                    * For browsers supporting "history.pushState" get generated
                    * object "location" with the usual "document.location".
                    */
                    var returnLocation = history.location || document.location;


                    // here can cause data loading, etc.


                    // just post
                    alert( "We returned to the page with a link: " +
                                                         returnLocation.href );
                }
            }
        </script>
    </head>
    <body>
        <a href="/mylink.html">My Link</a>
        <a href="/otherlink.html">Other Link</a>
    </body>
</html>

将库与JQuery一起使用的示例：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="history-2.0.4.js"></script>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(function() {

                // looking for all the links and hang on the event,
                // all references in this document
                $("a").click(function() {
                    // keep the link in the browser history
                    history.pushState( null, null, this.href );


                    // here can cause data loading, etc.


                    // do not give a default action
                    return false;
                });

                // hang on popstate event triggered
                // by pressing back/forward in browser
                $( window ).bind( "popstate", function( e ) {

                    // we get a normal Location object

                    /*
                    * Note, this is the only difference when using this library,
                    * because the object document.location cannot be overriden, so
                    * library the returns generated "location" object within an
                    * object window.history, so get it out of "history.location".
                    * For browsers supporting "history.pushState" get generated
                    * object "location" with the usual "document.location".
                    */
                    var returnLocation = history.location || document.location;


                    // here can cause data loading, etc.


                    // just post
                    alert( "We returned to the page with a link: " +
                                                        returnLocation.href );
                });
            });
        </script>
    </head>
    <body>
        <a href="/mylink.html">My Link</a>
        <a href="/otherlink.html">Other Link</a>
    </body>
</html>

在IE中模拟/ polyfill history.pushstate（）

2 个答案: