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 state来防止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看到那里的演示。

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

1 个答案: