क्या मैं इतिहास.popstate को प्रारंभिक पृष्ठ-लोड पर ट्रिगर करने से रोक सकता हूं?

Question

मैं ऐसी साइट पर काम कर रहा हूं जो AJAX के माध्यम से सामग्री परोसता है।

यदि आप मेनू में किसी आइटम पर क्लिक करते हैं, तो सामग्री div को $.get प्रतिक्रिया के साथ अद्यतन किया जाता है, कुछ भी फैंसी नहीं है।

मैं ब्राउज़र के पीछे/आगे बटन के साथ नेविगेशन की अनुमति देने के लिए history.pushState लागू कर रहा हूं।

$(function() { 
    $(window).bind("popstate", function() { 
     $.getScript(location.href); 
    }); 
}); 

समस्या है, जब एक पृष्ठ के लिए पहली बार भरी हुई है, इस समारोह $.getScript तो पेज तुरंत फिर से लोड किया जाता है करता है:

मैं इतिहास मार्गदर्शक पर सामग्री लोड करने के लिए निम्न है। पहली बार पृष्ठ लोड होने पर यह प्रारंभिक HTML दृश्य प्रस्तुत करता है, फिर दूसरे लोड पर यह जेएस व्यू प्रस्तुत करता है, क्योंकि यह एक जेएस अनुरोध है।

मैं इस घटना को HTML अनुरोधों वाले पृष्ठों पर फायरिंग से कैसे रोक सकता हूं?

Answer 1

देशी एचटीएमएल 5 इतिहास एपीआई आप कुछ समस्याओं में चलाने के लिए जा रहे हैं का उपयोग करना, हर एचटीएमएल 5 ब्राउज़र एपीआई संभालती है एक छोटा सा अलग ढंग से, ताकि आप केवल इसे एक बार कोड नहीं कर सकते हैं और यह समाधान को लागू करने के बिना काम करने की उम्मीद । History.js एचटीएमएल 5 इतिहास एपीआई के लिए एक क्रॉस-ब्राउज़र एपीआई प्रदान करता है और यदि आप उस मार्ग पर जाना चाहते हैं तो HTML4 ब्राउज़र के लिए वैकल्पिक hashchange फ़ॉलबैक प्रदान करता है। https://github.com/browserstate/ajaxify

कौन सा लंबे लेख Intelligent State Handling जो hashbang, हैश और एचटीएमएल 5 इतिहास एपीआई के बारे में स्पष्टीकरण में चला जाता है का हिस्सा है:

एक रिया/अजाक्स आवेदन आप इस कोड का उपयोग कर सकते हैं में अपनी वेबसाइट को अपग्रेड करने के लिए

।

मुझे बताएं कि आपको किसी और मदद की ज़रूरत है :) चीयर्स।

Answer 2

जब ब्राउज़र पहले लोड होता है, तो यह हमेशा पॉपस्टेट ईवेंट को सक्रिय करता है। तो आपको यह निर्धारित करने की आवश्यकता है कि यह पॉपस्टेट आपका है या नहीं।

जब आप अपना पुशस्टेट करते हैं, तो सुनिश्चित करें कि आपके पास एक राज्य वस्तु है। इस तरह आप इसे बाद में देख सकते हैं।

फिर popstate हैंडलर पर, राज्य वस्तु :)

$(function() { 
    $(window).bind("popstate", function(data) { 
     if (data.state.isMine) 
      $.getScript(location.href); 
    }); 
}); 

// then add the state object 
history.pushState({isMine:true},title,url); 

जाँच आप किसी भी और अधिक मदद की :)

Answer 3

जब popstate घटना पृष्ठ लोड पर निकाल दिया जाता है की जरूरत है मुझे जानते हैं ऐसा नहीं होगा घटना वस्तु में एक राज्य संपत्ति है। यह आपको यह जांचने की अनुमति देता है कि पृष्ठ लोड के लिए ईवेंट को निकाल दिया गया है या नहीं।

window.onpopstate = function (event) { 
    if (event.state) { 
    // do your thing 
    } else { 
    // triggered by a page load 
    } 
} 

Answer 4

आप event.originalEvent

// Somewhere in your previous code 
if (history && history.pushState) { 
    history.pushState({module:"leave"}, document.title, this.href); 
} 


$(window).bind("popstate", function(evt) { 
    var state = evt.originalEvent.state; 
    if (state && state.module === "leave") { 
    $.getScript(location.href); 
    } 
}); 

Answer 5

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

1. $(document).ajaxComplete(function(ev, jqXHR, settings) { 
   
       var stateObj = { url: settings.url, innerhtml: document.body.innerHTML }; 
       window.history.pushState(stateObj, settings.url, settings.url); 
   }); 
   
   
   window.onpopstate = function (event) { 
       var currentState = history.state; 
       document.body.innerHTML = currentState.innerhtml; 
   };