रीडायरेक्ट के बजाय जावास्क्रिप्ट वाले पृष्ठों को कैसे लोड करें?

Question

जो मैं करने की कोशिश कर रहा हूं उसका सबसे अच्छा उदाहरण यूट्यूब की नेविगेशन प्रणाली है। यदि आप किसी वीडियो के लिंक पर क्लिक करते हैं तो पृष्ठ के शीर्ष पर एक लाल बार दिखाई देता है यह दर्शाता है कि अनुरोधित पृष्ठ कितना लोड हो गया है। जब अनुरोध किया गया पृष्ठ लोड हो जाता है तो यह तुरंत पिछले पृष्ठ की सामग्री को प्रतिस्थापित करता है और वीडियो लोड होने लगता है। इसे यथासंभव निर्बाध बनाने के लिए कई चीजें हो रही हैं।

• यूआरएल नए पेज से मेल खाने के लिए संशोधित किया गया है।
• कोई रीडायरेक्ट नहीं (यह समझाना मुश्किल है)।
• नया पृष्ठ इतिहास में जोड़ा गया है।
• पीछे और आगे नेविगेशन निर्बाध रूप से काम करता है।

मैं के साथ URL संशोधित:

$.("html").load("newPage.php", function(){}); 

इस नए पृष्ठों कोड के साथ पिछले पूरे पृष्ठ के कोड की जगह लेंगे:

window.history.pushState("object or string", "Title", "/new-url"); 

मैं के साथ अनुरोध किया गया पृष्ठ लोड करने के लिए प्रयास किया। इस के साथ कई मुद्दों:

• वापस और आगे नेविगेशन यूआरएल के साथ काम करता है, लेकिन एक ईवेंट हैंडलर इस का पता लगाने और उचित पेज लोड करना होगा। मैं इस प्रयोग किया है:

  $(window).on('popstate', function() { 
      $('html').load("../"+window.location.pathname, {page:"account"}); 
  }); 
  

• का उपयोग $.load() नहीं कर सकते (चाहिए नहीं) किसी भी नए स्क्रिप्ट लोड स्क्रिप्ट टैग टैग कर देता है क्योंकि Synchronous XMLHttpRequest on the main thread is deprecated

मैं क्या करने में सक्षम होना चाहते हैं:

• JQuery और AJAX
• का उपयोग करके एक पृष्ठ को बिना किसी रीडायरेक्ट के लोड करें, उस नए पृष्ठ में नई स्क्रिप्ट और PHP टैग हो सकते हैं (PHP असंभव हो सकता है, और मुझे इसका उपयोग करना पड़ सकता है AJAX इसे दोहराने के लिए)।

सूत्रों का कहना है:

Updating address bar with new URL without hash or reloading the page

Load HTML page dynamically into div with jQuery

JS or Jquery browser back button click detector

Synchronous XMLHttpRequest on the main thread is deprecated

Answer 1

यह निम्नलिखित पोस्ट आप मदद कर सकता है।

Curious about the new way YouTube is loading pages

आप देख सकते हैं एक js पुस्तकालय history.js बुलाया मदद कर सकते हैं को प्राप्त है कि तुम क्या जरूरत है।

Answer 2

इतिहास.जेएस लाइब्रेरी इतिहास से निपटने के सभी कड़ी मेहनत करता है और मुझे केवल नेविगेशन के बारे में चिंता करने की ज़रूरत है, जो कि आसान था। मुझे बस इतना करना है कि पेज के शुरुआती लोड पर लोड की गई सभी स्क्रिप्ट्स हों (जब उपयोगकर्ता साइट पर पहली बार आती है)।फिर जब वे "पुनर्निर्देशित" होते हैं तो पृष्ठ शरीर को $("body").load("pageToBeLoaded.php",pageToBeLoaded()) का उपयोग करके सही पृष्ठ के साथ प्रतिस्थापित किया जाता है। pageToBeLoaded() फ़ंक्शन को पूरा होने पर कॉल किया जाता है, और यह नए पृष्ठ के लिए सभी मजेदार सामग्री को संभालता है।