मैं पृष्ठ को पुनः लोड किए बिना URL को कैसे संशोधित करूं?

Question

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

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

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

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

Comments

बस सवाल को समझना आसान बनाने के लिए, यह है कि फेसबुक जब आप एक तस्वीर खोलते हैं, उदाहरण के लिए। Url बार उस फ़ोटो को DIRECTLY इंगित करने के लिए बदलता है, इसलिए आप URL खोए बिना साझा कर सकते हैं कि आप साइट में कहाँ हैं। पिछले दशक के आधार पर साइटें याद रखें? आप केवल मुखपृष्ठ url प्राप्त कर सकते हैं, क्योंकि केवल आंतरिक फ़्रेम बदल रहे थे। और वह भयानक था।

— स्पाइडी

हालांकि history.pushState(), इस स्थिति में (सटीक परिस्थितियों के आधार पर ...) शायद एक सही जवाब है, सर्वर-साइड रीडायरेक्ट (जैसे कि अपाचे के रीव्रीट्युलर डायरेक्टिव का उपयोग करके) का उपयोग करने की संभावना कुछ ऐसा है जिस पर आप विचार करना चाहते हैं, या कम से कम जागरूक रहें। बस सोचा कि इसका उल्लेख किया जाना चाहिए!

— चल रहा

Answer 1

यह अब क्रोम, सफारी, फ़ायरफ़ॉक्स 4+ और इंटरनेट एक्सप्लोरर 10pp4 + में किया जा सकता है!

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

उदाहरण:

 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;
    }
};

---

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

Comments

IE7 में facebook कैसे करता है?

— डोमिनिक

@CHiRiLo ऐसे इतिहास की जाँच करता है । जो HTML5 इतिहास एपीआई का समर्थन नहीं करने वाले ब्राउज़रों के लिए एक वापसी प्रदान करता है।

— डेविड मर्डोक

@infensus यदि URL में कहीं # चिह्न है, तो यह चाल सालों से मौजूद है ..

— इज़्काता

"IE10pp4 +" के "pp4 +" भाग का क्या अर्थ है?

— स्कॉट टेस्लर

मंच पूर्वावलोकन 4

— डेविड मर्डोक

Answer 2

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

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

इसके बारे में यहाँ से और पढ़ें

Comments

file:///सुरक्षा कारणों से काम नहीं कर सकते हैं , जैसे फ़ायरफ़ॉक्स 30. के localhostसाथ टेस्ट करें python -m SimpleHTTPServer।

— सिरो सेंटिल्ली 冠状 病毒 iro i 法轮功 '

पहला पैरामीटर एक ऑब्जेक्ट होने की उम्मीद है, न कि केवल एक स्ट्रिंग।

— एलेक्सिस विल्के

IMO यह वास्तव में सबसे अच्छा जवाब है। यदि आप सभी करना चाहते हैं तो वर्तमान URL ({}, null, strNewPath) को अपडेट करें आपको बस इतना करना है। सबसे पहले अगर (इतिहास.पशुस्टेट) {}

— क्रेग जैकब्स

यदि आप उन्हें बदलना नहीं चाहते हैं तो आप पहले 2 मापदंडों के लिए अशक्त हो सकते हैं। आप तीसरे पैरामीटर के लिए एक पूर्ण यूआरएल का उपयोग कर सकते हैं।

— एंड्रयू

यह अच्छा होगा यदि आप उत्तर में कुछ और जानकारी डालें। मुझे नहीं पता, क्या पैरामीटर 1 करता है।

— RedClover

Answer 3

यदि आप url बदलना चाहते हैं, तो आप HTML5 रिप्लेसस्टेट का भी उपयोग कर सकते हैं, लेकिन ब्राउज़र इतिहास में प्रविष्टि नहीं जोड़ना चाहते:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

यह बैक बटन कार्यक्षमता को 'ब्रेक' करेगा। यह कुछ उदाहरणों में आवश्यक हो सकता है जैसे कि एक छवि गैलरी (जहां आप चाहते हैं कि बैक बटन गैलरी इंडेक्स पेज पर वापस लौटे, प्रत्येक चित्र के माध्यम से वापस जाने के बजाय प्रत्येक छवि को अपने स्वयं के अद्वितीय यूआरएल दे रहा है।

Answer 4

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

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

Comments

सबसे पहले अगर (history.pushState) {} सिर्फ पुराने ब्राउजर के साथ परीक्षण करें।

— क्रेग जैकब्स

यह फ़ायरफ़ॉक्स में आपके द्वारा प्राप्त किसी भी अधिक काम नहीं करता है: ऑपरेशन असुरक्षित है।

— katatusic

Answer 5

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

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

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

Comments

मैं डोमेन को बदलना नहीं चाहता, केवल पथ और फ़ाइल नाम।

— फलैश

यह अभी भी संभावित सुरक्षा जोखिमों को नहीं रोकता है क्योंकि ब्राउज़र को यह पता नहीं है कि डोमेन / माइसाइट और डोमेन / अन्य दोनों को उपयोगकर्ता द्वारा "सुरक्षित" माना जाता है। शायद सवाल यह होना चाहिए कि आप URL क्यों बदलना चाहते हैं? यदि यह उपयोगकर्ता से इसे अस्पष्ट करने के लिए है, तो आप बस एक iframe के भीतर अपना एप्लिकेशन चला सकते हैं।

— रॉबिन डे

आप वास्तव में फ्लैश के साथ ऐसा कर सकते हैं। यह आपको अनुरोध किए बिना URL को संशोधित करने की अनुमति देगा। यह संभव है क्योंकि फ्लैश ब्राउज़र के बाहर संचालित होता है, लेकिन इसके साथ बहुत कसकर।

— निक बर्र्डी

मेरा कहना है कि एड्रेस बार क्लाइंट-साइड में URL को संशोधित करने के लिए पूरी तरह से मान्य कारण हैं। उदाहरण के लिए, यदि आपके पास पेजिंग, सॉर्टिंग और फ़िल्टरिंग के साथ डेटा की एक तालिका है, और चाहते हैं कि उन चीजों को अजाक्स संचालित किया जाए, लेकिन फिर भी URL को अपडेट करें ताकि पृष्ठ की वर्तमान स्थिति बुकमार्क हो जाए। मैं डोमेन नाम (फ़िशिंग इत्यादि) को संशोधित करने के साथ सुरक्षा जोखिमों को समझ सकता हूं, लेकिन ब्राउज़र केवल स्क्रिप्ट के शीर्ष स्तर डोमेन के दाईं ओर के भाग को स्क्रिप्ट के माध्यम से संशोधित करने की अनुमति क्यों नहीं देते हैं?

— रविवार आयरनफुट

यह उत्तर अब 100% सत्य नहीं है। विवरण के लिए मेरा उत्तर देखें।

— डेविड मर्डोक

Answer 6

parent.location.hash = "hello";

Comments

मैं URL बदलना चाहता हूं, न कि केवल हैश - #mydata

— TheFlash

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

— मैथ्यू लॉक

@ जार्विस: क्या अंतर है?

— शोरगुल

जब तक स्पष्ट रूप से ट्रैकिंग सेवा को नहीं भेजा जाता तब तक @noisy सर्वर साइड ट्रैकिंग हैश नहीं देख सकती।

— RedYetiCo 22

यह उपयोगी नहीं है यदि आप एक mvc ढांचे का उपयोग कर रहे हैं जो हैश पर मार्गों, उदाहरण के लिए रीढ़।

— 13

Answer 7

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

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

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

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

इसके अलावा, 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है, जो पृष्ठ पुनः लोड नहीं होंगे। यही तरीका है कि कोणीय का उपयोग करने के लिए हैशटैग के अनुसार एसपीए ...

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

window.location.hash = "example";

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

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

Comments

चाहेंगे window.onhashchangeऔर window.onpopstateइस मामले में भी ऐसा ही?

— J0ANMM

पेज कंटेंट को कैसे लोड करें? यह सिर्फ URL

— MD

सामग्री लोड करें जैसा कि आप आमतौर पर अजाक्स के साथ करते हैं।

— AndroidDev 15'18

Answer 8

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

Answer 9

HTML5 से पहले हम उपयोग कर सकते हैं:

parent.location.hash = "hello";

तथा:

window.location.replace("http:www.example.com");

यह विधि आपके पृष्ठ को पुनः लोड करेगी, लेकिन HTML5 ने परिचय दिया history.pushState(page, caption, replace_url)कि आपके पृष्ठ को पुनः लोड नहीं करना चाहिए।

Comments

इसके साथ समस्या यह है history.pushState(..)कि यदि आप किसी अन्य डोमेन पर पुनर्निर्देशित करना चाहते हैं, तो क्रॉस डोमेन पॉलिसी लागू होती है। जबकि window.location.replace(..)दूसरे डोमेन पर पुनर्निर्देशन संभव है।

— OSWorX

Answer 10

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

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

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

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

3) उपयोगकर्ता इस URL को किसी और को देता है, या इसे बुकमार्क करता है

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);
}

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

Answer 11

नीचे पृष्ठ को फिर से लोड किए बिना URL बदलने का कार्य है। यह केवल HTML5 के लिए समर्थित है।

  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');

Comments

@ग्रीन, पेज उस राज्य के लिए एक छोटा शीर्षक है जिसके लिए आप आगे बढ़ रहे हैं। फ़ायरफ़ॉक्स वर्तमान में इस पैरामीटर की उपेक्षा करता है, हालांकि भविष्य में इसका उपयोग कर सकता है। खाली स्ट्रिंग को यहां पास करना भविष्य में विधि में बदलाव के खिलाफ सुरक्षित होना चाहिए। से: developer.mozilla.org/en-US/docs/Web/API/...

— Snook

Answer 12

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

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

Comments

क्या मैं "location.pathname" का उपयोग कर सकता हूँ ??

— TheFlash

नहीं, उस विशेषता को बदलने से अनुरोध भी हो जाएगा।

— गुमबो

Answer 13

आप एंकर टैग जोड़ सकते हैं। मैं अपनी साइट पर इसका उपयोग करता हूं ताकि मैं Google Analytics के साथ ट्रैक कर सकूं कि लोग पृष्ठ पर क्या देख रहे हैं।

मैं सिर्फ एक एंकर टैग जोड़ता हूं और फिर उस पृष्ठ का हिस्सा जिसे मैं ट्रैक करना चाहता हूं:

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

Answer 14

जैसा कि थॉमस स्टर्जर्नगार्ड जेप्पसेन ​​ने कहा है, आप History.js का उपयोग कर सकते हैं अपने Ajax लिंक और एप्लिकेशन के माध्यम से उपयोगकर्ता नेविगेट करते हुए URL पैरामीटर को संशोधित करने के का ।

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

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

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

Answer 15

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

अधिक जानकारी के लिए HTML5 इतिहास एपीआई का संदर्भ लें ।

Answer 16

आप अपने आवेदन पर कहीं भी इस सुंदर और सरल समारोह का उपयोग कर सकते हैं।

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', 'Title', new_url);
    document.title = title;
}

आप न केवल URL को संपादित कर सकते हैं, बल्कि इसके साथ शीर्षक भी अपडेट कर सकते हैं।

काफी सभी को मददगार।

Comments

एंकर के लिए भी एक आकर्षण की तरह काम करता हैwindow.history.pushState('data', 'Title', '#new_location');

— BIOHAZARD