एचटीएमएल 5: ताज़ा पेज जब popstate निकाल दिया जाता है

Question

मैं की तरह एक ajax खोज फार्म है:

यूआरएल:/खोज/

=> उपयोगकर्ता एक खोज अवधि में प्रवेश करती है और एक बटन क्लिक करता है

= > खोज किया जाता है और पेज

पर एक div में परिणामों के माध्यम से परिणाम दिखाता है लेकिन मैं यह भी चाहता हूं कि उपयोगकर्ता & कॉपी करने में सक्षम हो और मित्रों को यूआरएल पेस्ट करें और पिछली खोजें के माध्यम से नेविगेट करें। तो जब खोज ट्रिगर, मैं यूआरएल को बदलने में ब्राउज़रों का उपयोग करने से

/खोज/

को

/खोज/q = yourkeyword

पता-:

window.history.pushState("", "Search for "+keyword, "/search/?q="+keyword); 

यह ब्राउजर एड्रेसबार में यूआरएल को/search /? Q = yourkeywords में बदलता है और ठीक काम करता है।

अब, बैक-बटन मारकर, ब्राउज़र एड्रेसबार फिर से/खोज/दिखा रहा है, जो ठीक है। लेकिन पृष्ठ-सामग्री को पुनः लोड नहीं किया गया है, यह अभी भी/search /? Q = yourkeyword से परिणाम दिखाता है।

तो मैं कहा:

window.addEventListener("popstate", function(e) 
{ location.reload(); 
}); 

इस सही तरीका है? यह एफएफ और क्रोम जैसे डेस्कटॉप-ब्राउज़र में ठीक काम करता है, लेकिन उदाहरण के लिए आईओएस में, पॉपस्टेट-इवेंट को सर्चफॉर्म पर पहली बार लोडिंग पर/निकाल दिया जाता है, जिसके परिणामस्वरूप उस पृष्ठ का एक निरंतर पुनः लोडिंग होता है।

इसे करने का सही तरीका क्या है?

Answer 1

मेरे सुझाव:

window.location.href = window.location.href; 

मैं इसे परीक्षण नहीं किया है, लेकिन मुझे लगता है कि तुम क्या चाहते हो जाएगा।

Answer 2

सबसे आसान समाधान वैश्विक चर सेट करना है जब आप pushState का उपयोग करते हैं। फिर, अपने ऑनपोस्टेट हैंडलर में बस यह सेट करें कि यह सेट है या नहीं। उदा .:

window.historyInitiated = true; 
window.history.pushState("", "Search for "+keyword, "/search/?q="+keyword); 
... 
window.addEventListener("popstate", function(e) { 
    if (window.historyInitiated) { 
    window.location.reload(); 
    } 
});