CODEWITHSUNDEEP
javascriptinternet-explorer
Uday
Uday

Reputation:

Emulate/polyfill history.pushstate() in IE

history.pushstate() is not supported in IE. Is there another way to achieve this in IE?

Upvotes: 42

Views: 42922

Answers (2)

devote
devote

Reputation: 627

Consider using history API for unsupported browsers or see library on https://github.com/devote/HTML5-History-API

This Javascript library provides an emulation of HTML5 History API for older browsers.

The library operates according to W3C specification, adding no new or incompatible methods. The library can be used exactly as described, for example, in Dive Into HTML5 book http://diveintohtml5.info/history.html or in the History API Specification http://www.w3.org/TR/html5/history.html#the-history-interface.

Example of using the library in the pure JS context:

<!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>

Example of using the library along with 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>

Upvotes: 17

cyberx86
cyberx86

Reputation: 488

Consider using or adapting History.js from GitHub. As per the description:

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore. For HTML4 browsers it will revert back to using the old onhashchange functionality.

IE (upto and including 9), does not support pushstate(). IE 10 supports it.

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

Upvotes: 28

Related Questions