javascript - पेज को पुनः लोड किए बिना यूआरएल को संशोधित करें




html url (12)

HTML 5 इतिहास API से history.pushState() उपयोग करें

अधिक जानकारी एचटीएमएल 5 इतिहास एपीआई के लिए लिंक देखें

क्या कोई तरीका है कि मैं पृष्ठ को पुनः लोड किए बिना वर्तमान पृष्ठ के यूआरएल को संशोधित कर सकता हूं?

यदि संभव हो तो # हैश से पहले मैं भाग को एक्सेस करना चाहता हूं।

मुझे केवल डोमेन के बाद हिस्से को बदलने की आवश्यकता है, इसलिए ऐसा नहीं है कि मैं क्रॉस-डोमेन नीतियों का उल्लंघन कर रहा हूं।

 window.location.href = "www.mysite.com/page2.php";  // sadly this reloads

आधुनिक ब्राउज़रों और एचटीएमएल 5 में, विंडो history पर pushState नामक एक विधि है। यह यूआरएल को बदल देगा और पृष्ठ को लोड किए बिना इसे इतिहास में धक्का देगा।

आप इसका उपयोग इस तरह कर सकते हैं, इसमें 3 पैरामीटर होंगे, 1) स्टेट ऑब्जेक्ट 2) शीर्षक और यूआरएल):

window.history.pushState({page: "another"}, "another page", "example.html");

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

इसके अलावा history.replaceState() जो बिल्कुल वही काम करता है, सिवाय इसके कि यह एक नया निर्माण करने के बजाय वर्तमान इतिहास को संशोधित करेगा!

इसके अलावा आप यह देखने के लिए एक फ़ंक्शन बना सकते हैं कि history.pushState मौजूद है या नहीं, फिर बाकी के साथ इस तरह के साथ आगे बढ़ें:

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);   
  }
}

goTo("another page", "example", 'example.html');

इसके अलावा आप # <HTML5 browsers लिए # को बदल सकते हैं, जो पेज को फिर से लोड नहीं करेगा, इसी तरह Angular अनुसार एंगुलर SPA करने के लिए उपयोग करता है ...

बदलना # काफी आसान है, ऐसा करना:

window.location.hash = "example";

और आप इसे इस तरह से पहचान सकते हैं:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

एचटीएमएल 5 ने history.pushState() और history.replaceState() विधियों को प्रस्तुत किया है, जो आपको क्रमशः इतिहास प्रविष्टियों को जोड़ने और संशोधित करने की अनुमति देता है।

window.history.pushState('page2', 'Title', '/page2.php');

here से इसके बारे में और पढ़ें


एचटीएमएल 5 प्रतिस्थापन उत्तर है, जैसा कि पहले से ही विवार्ट और geo1701 द्वारा उल्लेख किया गया है। हालांकि यह सभी ब्राउज़रों / संस्करणों में समर्थित नहीं है। History.js एचटीएमएल 5 राज्य सुविधाओं को लपेटता है और एचटीएमएल 4 ब्राउज़र के लिए अतिरिक्त समर्थन प्रदान करता है।


जैसा कि थॉमस Stjernegaard Jeppesen द्वारा इंगित किया गया है, आप यूआरएल पैरामीटर को संशोधित करने के लिए History.js का उपयोग कर सकते हैं, जबकि उपयोगकर्ता आपके अजाक्स लिंक और ऐप्स के माध्यम से नेविगेट करता है।

उस उत्तर के लगभग एक साल बीत चुके हैं, और History.js बढ़े और अधिक स्थिर और क्रॉस-ब्राउज़र बन गए। अब इसका उपयोग एचटीएमएल 5-अनुरूप के साथ-साथ कई एचटीएमएल 4-केवल ब्राउज़र में इतिहास राज्यों को प्रबंधित करने के लिए किया जा सकता है। इस डेमो में आप एक उदाहरण देख सकते हैं कि यह कैसे काम करता है (साथ ही साथ इसकी कार्यक्षमताओं और सीमाओं को आजमाने में सक्षम है।

क्या आपको इस पुस्तकालय का उपयोग और कार्यान्वित करने में किसी भी मदद की ज़रूरत है, तो मैं आपको डेमो पेज के स्रोत कोड को देखने का सुझाव देता हूं: आप देखेंगे कि यह करना बहुत आसान है।

अंत में, हैश (और हैशबैंग्स) का उपयोग करने के बारे में एक व्यापक स्पष्टीकरण के लिए, बेंजामिन लूपटन द्वारा इस लिंक को देखें।


पेज को फिर से लोड किए बिना यूआरएल बदलने के लिए फंक्शन नीचे दिया गया है। यह केवल एचटीएमएल 5 के लिए समर्थन करता है

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');

यदि आप जो करने का प्रयास कर रहे हैं, वह उपयोगकर्ताओं को पृष्ठों को बुकमार्क / साझा करने की अनुमति देता है, और आपको बिल्कुल सही यूआरएल होने की आवश्यकता नहीं है, और आप किसी और चीज़ के लिए हैश एंकर का उपयोग नहीं कर रहे हैं, तो आप इसे दो में कर सकते हैं भागों; आप ऊपर चर्चा की गई location.hash का उपयोग करते हैं, और उसके बाद एक हैश एंकर के साथ एक यूआरएल देखने के लिए होम पेज पर एक चेक लागू करते हैं, और आपको बाद के परिणाम पर रीडायरेक्ट करते हैं।

उदाहरण के लिए:

1) उपयोगकर्ता www.site.com/section/page/4

2) उपयोगकर्ता कुछ क्रिया करता है जो यूआरएल को www.site.com/#/section/page/6 (हैश के साथ) में बदल देता है। मान लें कि आपने पृष्ठ 6 के लिए पृष्ठ में सही सामग्री लोड की है, इसलिए हैश के अलावा उपयोगकर्ता बहुत परेशान नहीं है।

3) उपयोगकर्ता इस यूआरएल को किसी और को पास करता है, या बुकमार्क करता है

4) किसी और, या बाद में एक ही उपयोगकर्ता, www.site.com/#/section/page/6 जाता है

5) www.site.com/ पर कोड उपयोगकर्ता को www.site.com/section/page/6 पर रीडायरेक्ट करता है, इस तरह कुछ उपयोग करते हुए:

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

उम्मीद है कि समझ में आता है! यह कुछ स्थितियों के लिए एक उपयोगी दृष्टिकोण है।


यदि आप यूआरएल खंड को बदल नहीं रहे हैं तो लक्शन के किसी भी बदलाव (या तो window.location या document.location ) उस नए यूआरएल पर एक अनुरोध का कारण बनेंगे। यदि आप यूआरएल बदलते हैं, तो आप यूआरएल बदलते हैं।

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


यह अब क्रोम, सफारी, एफएफ 4 +, और आईई 10pp4 + में किया जा सकता है!

अधिक जानकारी के लिए इस प्रश्न का उत्तर देखें: हैश के बिना नए यूआरएल के साथ एड्रेस बार अपडेट करना या पेज को फिर से लोड करना

उदाहरण:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

फिर आप पीछे / आगे बटन नेविगेशन का पता लगाने के लिए window.onpopstate का उपयोग कर सकते हैं:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

ब्राउज़र इतिहास में हेरफेर करने के बारे में अधिक गहराई से देखने के लिए इस एमडीएन आलेख को देखें


यहां मेरा समाधान है: (newUrl आपका नया यूआरएल है जिसे आप वर्तमान में बदलना चाहते हैं)

history.pushState({}, null, newUrl);

window.history.pushState("object or string", "Title", "/new-url") , लेकिन यह अभी भी सर्वर पर नया यूआरएल अनुरोध भेज रहा है


नोट: यदि आप एक HTML5 ब्राउज़र के साथ काम कर रहे हैं तो आपको इस जवाब को अनदेखा करना चाहिए। यह अब संभव है जैसा कि अन्य उत्तरों में देखा जा सकता है।

पृष्ठ को पुनः लोड किए बिना ब्राउज़र में URL को संशोधित करने का कोई तरीका नहीं है। यूआरएल दर्शाता है कि आखिरी लोड पेज क्या था। यदि आप इसे ( document.location ) बदलते हैं तो यह पृष्ठ को फिर से लोड करेगा।

एक स्पष्ट कारण यह है कि, आप www.mysite.com पर एक साइट लिखते हैं जो बैंक लॉगिन पृष्ठ की तरह दिखता है। फिर आप www.mybank.com कहने के लिए ब्राउज़र यूआरएल बार www.mybank.com । उपयोगकर्ता पूरी तरह से अनजान होगा कि वे वास्तव में www.mysite.com देख रहे हैं।







friendly-url