F5 या रीफ्रेश बटन दबाए जाने पर पृष्ठ के केवल एक हिस्से को रीफ्रेश करें

Question

मैं एक ऐसे वेब एप्लिकेशन को डिज़ाइन कर रहा हूं जिसमें सभी पृष्ठों के लिए एक साझा मेनू है। इसके कारण मैंने jquery का उपयोग करके, div के अंदर मेनू बटन से जुड़े सामग्रियों को लोड करने का निर्णय लिया।

तो, मैं इस है:

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

मैं पेज "#content" div अंदर प्रदर्शित पर नज़र रखना चाहते हैं। यदि उपयोगकर्ता पृष्ठ को रीफ्रेश करते हैं तो मैं उसी पृष्ठ को "#content" में लोड करना चाहता हूं। क्या ऐसा करने का कोई तरीका है, या कोई कामकाज है?

मैंने कुछ वेबसाइटें देखी हैं जो पृष्ठों को लोड करने के लिए आईफ्रेम का उपयोग करती हैं, लेकिन जब कोई उपयोगकर्ता मेनू में बटन क्लिक करता है तो यूआरएल भी बदल जाता है। मुझे यह कैसे करना है इस बारे में कोई जानकारी नहीं मिली।

धन्यवाद

Answer 1

आप domain.com/index.php#addproduct

document.ready पर फिर

यूआरएल (# के बाद) के हैश हिस्सा करने के लिए पैरामीटर संलग्न करना होगा, उदाहरण के लिए # के बाद मान की जाँच और इसी सामग्री को लोड करें।

jQuery history जैसे कुछ प्लगइन्स इस तकनीक का उपयोग करते हैं।

इसके अतिरिक्त, आप स्थानीय स्टोरेज का लाभ उठा सकते हैं और ब्राउज़र पर कोड के हिस्सों को कैश कर सकते हैं, इसलिए आप दूसरी बार AJAX कॉल के साथ सामग्री लोड नहीं करेंगे।

Answer 2

यहाँ F5 और Ctrl + आर के लिए एक समाधान है

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

Answer 3

वैकल्पिक रूप से, एक हैश का उपयोग कर के बजाय, आप एचटीएमएल 5 इतिहास एपीआई (pushState, replaceState, और popstate) का उपयोग कर सकते हैं। असल में, यह कुछ सुधारों के साथ हैश है (एक के लिए, खोज इंजन द्वारा अनुक्रमित)।

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