在 IE 中模拟/填充 history.pushstate()答案

【问题标题】：Emulate/polyfill history.pushstate() in IE在 IE 中模拟/填充 history.pushstate()
【发布时间】：2011-07-08 06:01:33
【问题描述】：

history.pushstate() 在 IE 中不受支持。有没有另一种方法可以在 IE 中实现这一点？

【问题讨论】：

为什么需要pushState()？您的网站应该没有 pushState() 甚至没有javascript 也可以使用。 IE10支持pushState()。
@SeanHogan 一个没有 Javascript 的网站？你生活在 1994 年？
我在一定程度上同意@SeanHogan。没有 javascript 的网站不应该是全功能的，但应该是可导航和可用的。如果脚本或库无法加载怎么办？该网页应该仍然可用，即使功能不完全。
@Prusprus：感谢您扩展我的评论，尽管我看不出有人如何将“在没有 pushState / javascript 的情况下可用”与“不得使用 javascript”混淆。我猜是略读。

标签： javascript internet-explorer

【解决方案1】：

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

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

IE（最多并包括 9），不支持 pushstate()。 IE 10 支持它。

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

【讨论】：

【解决方案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>

【讨论】：

如何获取我在状态中推送的 json 对象？所以oncomplete 的ajax 请求，我做了这个history.pushState({rowAttr: rowAttrHtml, colAttr: colAttrHtml}, null, document.URL);，然后我有$( window ).bind( 'popstate', function( event ) { var State = history.state; alert(State.data.rowAttr);});。警报显示undefined