nav-poll.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 () {
            var isLoading = false;

            $('#menu a').click(function() {
                var link = this;
                selectLink(link);

                isLoading = true;
                $('#frame').one('load', function() { isLoading = false; });
                $('#frame').attr('src', link.href);

                (function poll () {
                    var frameWindow = getFrameWindow();
                    if (frameWindow.location.href == link.href) {
                        frameWindow.history.replaceState({ linkId: link.id },frameWindow.document.title, frameWindow.location.href);
                    } else {
                        setTimeout(poll, 100);
                    }
                })();

                return false;
            });

            setInterval(function () {
                if (!isLoading) {
                    handleHistory('timer');
                }
            }, 100);
        });

        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.cshtml?1">1</a>
        <a id="2" href="out.cshtml?2">2</a>
        <a id="3" href="out.cshtml?3">3</a>
    </div>
    <iframe id="frame"></iframe>
</body>
</html>