javascript - 导航到另一个页面时使用 PushState/PopState 保留 div 内容

Question

我正在学习一些有关 html5 概念的知识，并尝试将其集成到我的项目中。我有一个名为 chat_wnd.aspx 的页面，希望是由 Signalr 编程的两个客户端之间的聊天页面，以及一个具有如下 div 的母版页:

<script type="text/javascript">
function OpenChatwnd() {
    $("#ifrm").attr("src", "/chat_wnd.aspx");
}
</script>
<a href="javascript:OpenChatwnd();">Open chat wnd</a>
<div id="dv_chat">
    <iframe id="ifrm"></iframe>
</div>

有没有办法使用push/pop状态来防止每次导航到网站中的另一个页面时iframe在div内重新加载

Answer 1

PushState 仅更改 URL 并将 URL 添加到历史记录中，而不会更改内容，因此您应该使用 ajax 来更改内容。

请注意，如果您想使用 <a>要导航另一个页面，您的 JavaScript 可能如下所示:

$('a').click(function(e) {
    e.preventDefault(); // prevent default action of navigating to another page

    // ajax load data
    $.ajax({
        url: $(this).attr('href'),
        type: "GET",
        success: function(html){
            $('#content').(html);
        },
        error:function(xhr, ajaxOptions, thrownError){ 
            console.error(xhr.status); 
            console.error(thrownError); 
        }
    });

    // change the current URL
    window.history.pushState('', document.title, $(this).attr('href'));
});

另外，这是一个 jQuery 插件 PJAX提供AJAX和pushState的集成，可以在here查看demo .