IE6 & IE7 issue - Not working when combined with Modernizr

visualasparagus commented 11 years ago

Thanks for the great polyfill!

I've noticed a strange issue with IE6 and IE7 on XP. If I load Modernizr first, before history.js then things aren't working. Ideally I would like to use Modernizr.load to conditionally load the history.js. My simple test code is below. On IE8 it's fine

DOES NOT WORK

<!DOCTYPE html>
<html>
    <head>
    <script src="modernizr-2.6.2-respond-1.1.0.min.js"></script>        
    <script src="history.js"></script>        
    <script>
    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>

WORKS

<!DOCTYPE html>
<html>
    <head>
    <script src="history.js"></script>        
    <script src="modernizr-2.6.2-respond-1.1.0.min.js"></script>        
    <script>
    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>

visualasparagus commented 11 years ago

The crux of the issue seems to be that history.pushState ends up being undefined when modernizr loads first.

devote commented 11 years ago

The crux of the issue seems to be that history.pushState ends up being undefined when modernizr loads first.

This problem is and I already know about it. I did pull request to the branch Modernizr: https://github.com/Modernizr/Modernizr/pull/976 but it refused to accept

devote commented 11 years ago

You can use _window_.history.pushState Using the prefix window in IE6-7 will work well. It's not ideal, but in order to get around the problem, it is a decent option.

visualasparagus commented 11 years ago

Thanks for the tip. Hopefully Modernizr will accept the request soon to fix the issue.

devote commented 11 years ago

Yeah!! My commit is merged :)

devote / HTML5-History-API

IE6 & IE7 issue - Not working when combined with Modernizr #30

DOES NOT WORK

WORKS