javascript - How to refresh only a part of the page when F5 or refresh button is pressed - Stack Overflow

admin管理员组

文章数量:1341465

I'm designing a web application that has a shared menu for all pages. Due to this i decided to load the contents linked by the menu buttons inside a div, using jquery.

So, I have this:

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

I want to keep track of the page displayed inside the "#content" div. If the users refreshes the page I want to load the same page in "#content". Is there any way to do this, or is there any workaround?

I saw some websites that use an iframe to load the pages, but when a user clicks a button in the menu the url is also changed. I didn't find any info on how to do that.

Thanks

I'm designing a web application that has a shared menu for all pages. Due to this i decided to load the contents linked by the menu buttons inside a div, using jquery.

So, I have this:

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

I want to keep track of the page displayed inside the "#content" div. If the users refreshes the page I want to load the same page in "#content". Is there any way to do this, or is there any workaround?

I saw some websites that use an iframe to load the pages, but when a user clicks a button in the menu the url is also changed. I didn't find any info on how to do that.

Thanks

• javascript
• jquery
• html
• iframe

Share Follow edited Oct 9, 2011 at 2:25 Book Of Zeus 49.9k1818 gold badges175175 silver badges171171 bronze badges asked Sep 24, 2011 at 14:54 Dan DinuDan Dinu 33.5k2525 gold badges8383 silver badges119119 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Here's a solution for the F5 and CTRL+R

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

You should append parameter to the hash part of the url (after #), for example domain./index.php#addproduct

Then on document.ready check the value after # and load the corresponding content.

Some plugins like jQuery history use this technique.

Additionally, you can leverage the local storage and cache parts of the code at the browser, so you won't load the content with AJAX call the second time.

Alternatively, instead of using a hash, you can use the HTML5 history API (pushState, replaceState, and popstate). Basically, it's a hash with some improvements (for one, indexable by search engines).

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

本文标签： javascriptHow to refresh only a part of the page when F5 or refresh button is pressedStack Overflow