当按下F5或刷新按钮时如何只刷新页面的一部分

Question

我正在设计一个具有共享菜单的Web应用程序。因此，我决定使用jQuery在一个div中加载由菜单按钮链接的内容。

所以，我有以下代码：

     $("#AddNewProductBtn").click(function() {
       $("#content").load("addproduct.html");
   });

我希望能够跟踪“#content” div 中显示的页面。如果用户刷新页面，我希望在“#content”中加载相同的页面。有没有办法做到这一点，或者有没有任何解决方法？

我看到一些网站使用 iframe 来加载页面，但当用户点击菜单中的按钮时，URL 也会改变。我没有找到任何相关信息。

谢谢。

- Dan Dinu

Answer 1

这里有一个解决F5和CTRL+R的方法。

$(document).keydown(function(e) {
    if (e.which == 116 || e.keyCode == 82 && e.ctrlKey) { //116 = F5
        $("#content").load("addproduct.html");
        return false;
    }
}); 

- Book Of Zeus

Answer 2

您应将参数附加到url的哈希部分（#后面），例如domain.com/index.php#addproduct

然后在document.ready中检查#后面的值并加载相应的内容。

一些插件（如jQuery history）使用此技术。

此外，您可以利用浏览器代码的本地存储和缓存部分，以便第二次不需要通过AJAX调用加载内容。

- Maxim Krizhanovsky

Answer 3

或者，你可以使用HTML5历史记录API（pushState，replaceState和popstate）代替使用哈希。基本上，它是一个带有一些改进的哈希（例如，可以被搜索引擎索引）。

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
http://www.w3.org/TR/html5/history.html

- Hello71