nav.html

<!DOCTYPE html>
<html>
<head>
    <title>Y U NO WORK?</title>
    <style>
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #menu {
            width: 100%;
            height: 30px;
            background: yellow;
            font-size: 20px;
            padding: 10px;
        }
        .active {
            font-size: 24px;
            font-weight: bold;
        }
        #frame {
            width: 100%;
            height: 100%;
            min-height: 500px;
            margin-top: 50px;
            border: none;
        }
    </style>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#menu a').click(function() {
                var link = this;
                selectLink(link);

                $('#frame').one('load', function() {
                    var frameWindow = getFrameWindow();
                    frameWindow.history.replaceState({ linkId: link.id },frameWindow.document.title, frameWindow.location.href);

                    // Does not work
                    $(frameWindow).on('popstate', function () { handleHistory('[email protected]'); });
                });
                $('#frame').attr('src', link.href);

                return false;
            });

            // The following does not work
            $(window).on('popstate', function () { handleHistory('popstate@window'); });
            $(getFrameWindow()).on('popstate', function () { handleHistory('[email protected]'); });
            $('#frame').on('popstate', function () { handleHistory('popstate@iframe'); });

            // This works but too slow
            $('#frame').load(function () { handleHistory('load@iframe'); });
        });

        function getFrameWindow() {
            return $('#frame')[0].contentWindow;
        }

        function selectLink (link) {
            $('#menu a').removeClass('active');
            $(link).addClass('active');
        }

        function handleHistory (caller) {
            console.log('Handling history from ' + caller);
            var state = getFrameWindow().history.state;
            if (state)
                selectLink('#' + getFrameWindow().history.state.linkId);
        }
    </script>
</head>
<body>
    <div id="menu">
        <a id="1" href="out.aspx?1">1</a>
        <a id="2" href="out.aspx?2">2</a>
        <a id="3" href="out.aspx?3">3</a>
    </div>
    <iframe id="frame"></iframe>
</body>
</html>