पृष्ठ को रीफ्रेश किए बिना URL पैरामीटर निकालें


153

मैं "के बाद सब कुछ हटाने की कोशिश कर रहा हूँ?" तैयार दस्तावेज़ पर ब्राउज़र url में।

यहाँ मैं कोशिश कर रहा हूँ:

jQuery(document).ready(function($) {

var url = window.location.href;
    url = url.split('?')[0];
});

मैं यह कर सकता हूं और इसे नीचे दिए गए कार्यों को देख सकता हूं:

jQuery(document).ready(function($) {

var url = window.location.href;
    alert(url.split('?')[0]);
});

एक पेज पर दो फॉर्म होते हैं और जब एक फॉर्म सबमिट किया जाता है तो यह कार्ट में एक उत्पाद जोड़ता है और पेज रीफ्रेश होने के बाद url में एक लंबा पैरामीटर जोड़ देता है। इसलिए मैं दस्तावेज़ तैयार होने पर उस पैरामीटर को हटाने में सक्षम होना चाहता हूं और यह ए से शुरू होता है?
डेरेक

1
यदि आप पृष्ठ को रीफ्रेश करना चाहते हैं, तो प्रतीक्षा क्यों करें .ready()? आपको नए URL पर पुनर्निर्देशित करने या केवल .pushState()अनुशंसित Joraid के रूप में प्रतीक्षा करने की आवश्यकता नहीं है ।
jfriend00

जवाबों:


227

टी एल; डॉ

1- करने के लिए संशोधित वर्तमान URL और सुई जोड़ने / यह (नए संशोधित यूआरएल) इतिहास सूची, उपयोग करने के लिए एक नया URL प्रविष्टि के रूप में pushState:

window.history.pushState({}, document.title, "/" + "my-new-url.html");

2- करने की जगह वर्तमान URL जोड़े बिना इतिहास प्रविष्टियों, उपयोग करने के लिए इसे replaceState:

window.history.replaceState({}, document.title, "/" + "my-new-url.html");

3- आपके व्यावसायिक तर्क के आधार पर , जैसे मामलों में उपयोगी होगा:pushState

  • आप ब्राउज़र के बैक बटन का समर्थन करना चाहते हैं

  • आप करना चाहते हैं बनाने के एक नए , यूआरएल जोड़ने / सम्मिलित / धक्का नया URL के इतिहास प्रविष्टियों, और यह वर्तमान URL बनाने

  • उपयोगकर्ताओं को एक ही मापदंडों के साथ पृष्ठ को बुकमार्क करने की अनुमति देता है (समान सामग्री दिखाने के लिए)

  • प्रोग्रामर एंकर से तत्कालीन तोते के माध्यम से डेटा तक पहुँचने के लिएstateObj


जैसा कि मैंने आपकी टिप्पणी से समझा, आप अपने URL को फिर से अनुप्रेषित किए बिना साफ़ करना चाहते हैं।

ध्यान दें कि आप पूरे URL को नहीं बदल सकते। आप सिर्फ वही बदल सकते हैं जो डोमेन के नाम के बाद आता है। इसका मतलब यह है कि आप बदल नहीं सकते हैं, www.example.com/लेकिन आप उसके बाद क्या बदल सकते हैं.com/

www.example.com/old-page-name => can become =>  www.example.com/myNewPaage20180322.php

पृष्ठभूमि

हम प्रयोग कर सकते हैं:

1- यदि आप इतिहास प्रविष्टियों में एक नया संशोधित URL जोड़ना चाहते हैं, तो पुशस्टेट () विधि

2- यदि आप वर्तमान इतिहास प्रविष्टि को अद्यतन / बदलना चाहते हैं, तो रिप्लेसस्टेट () विधि

.replaceState().pushState()सिवाय इसके कि वास्तव में एक नया बनाने के बजाय .replaceState() वर्तमान इतिहास प्रविष्टि को संशोधित करता है । ध्यान दें कि यह वैश्विक ब्राउज़र इतिहास में एक नई प्रविष्टि के निर्माण को नहीं रोकता है।


.replaceState()विशेष रूप से उपयोगी है जब आप कुछ उपयोगकर्ता कार्रवाई के जवाब में वर्तमान इतिहास प्रविष्टि की राज्य वस्तु या URL को अपडेट करना चाहते हैं ।


कोड

ऐसा करने के लिए मैं इस उदाहरण के लिए pushState () विधि का उपयोग करूंगा जो निम्नलिखित प्रारूप के समान काम करता है:

var myNewURL = "my-new-URL.php";//the new URL
window.history.pushState("object or string", "Title", "/" + myNewURL );

बदलने के लिए स्वतंत्र महसूस pushStateके साथ replaceStateअपनी आवश्यकताओं पर आधारित है।

आप परमार्थक के "object or string"साथ स्थानापन्न कर सकते हैं {}और इसके "Title"साथ document.titleअंतिम संधि बन जाएगी:

window.history.pushState({}, document.title, "/" + myNewURL );

परिणाम

कोड की पिछली दो पंक्तियाँ एक URL बनाएगी जैसे:

https://domain.tld/some/randome/url/which/will/be/deleted/

बनने के लिए:

https://domain.tld/my-new-url.php

कार्य

अब एक अलग दृष्टिकोण की कोशिश करते हैं। कहें कि आपको फ़ाइल का नाम रखने की आवश्यकता है। फ़ाइल नाम अंतिम /और क्वेरी स्ट्रिंग से पहले आता है ?

http://www.someDomain.com/really/long/address/keepThisLastOne.php?name=john

होगा:

http://www.someDomain.com/keepThisLastOne.php

कुछ इस तरह यह काम कर जाएगा:

 //fetch new URL
 //refineURL() gives you the freedom to alter the URL string based on your needs. 
var myNewURL = refineURL();

//here you pass the new URL extension you want to appear after the domains '/'. Note that the previous identifiers or "query string" will be replaced. 
window.history.pushState("object or string", "Title", "/" + myNewURL );


//Helper function to extract the URL between the last '/' and before '?' 
//If URL is www.example.com/one/two/file.php?user=55 this function will return 'file.php' 
 //pseudo code: edit to match your URL settings  

   function refineURL()
{
    //get full URL
    var currURL= window.location.href; //get current address

    //Get the URL between what's after '/' and befor '?' 
    //1- get URL after'/'
    var afterDomain= currURL.substring(currURL.lastIndexOf('/') + 1);
    //2- get the part before '?'
    var beforeQueryString= afterDomain.split("?")[0];  

    return beforeQueryString;     
}

अपडेट करें:

एक लाइनर प्रशंसकों के लिए, इसे अपने कंसोल / फायरबग में आज़माएं और यह पेज URL बदल जाएगा:

    window.history.pushState("object or string", "Title", "/"+window.location.href.substring(window.location.href.lastIndexOf('/') + 1).split("?")[0]);

यह पृष्ठ URL इससे बदल जाएगा:

http://stackoverflow.com/questions/22753052/remove-url-parameters-without-refreshing-page/22753103#22753103

सेवा

http://stackoverflow.com/22753103#22753103

नोट: जैसा कि सैमुअल एलवाईई ने नीचे टिप्पणी में इंगित किया है, यह सुविधा केवल के लिए पेश की गई है HTML5

एक वैकल्पिक दृष्टिकोण वास्तव में आपके पृष्ठ को पुनर्निर्देशित करेगा (लेकिन आप क्वेरी स्ट्रिंग खो देंगे `? ', क्या अभी भी इसकी आवश्यकता है या डेटा संसाधित किया गया है?)।

window.location.href =  window.location.href.split("?")[0]; //"http://www.newurl.com";


2
आप यह उल्लेख करना भूल गए कि यह केवल HTML5- सुविधा है। developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/…
सैमुअल ल्युवे L

आप आखिरी स्लैश से क्यों हट रहे हैं? ओपी के सवाल से क्या लेना-देना है? वे सिर्फ क्वेरी स्ट्रिंग से छुटकारा पाना चाहते हैं। पहला प्रश्न चिह्न क्वेरी स्ट्रिंग की शुरुआत को परिभाषित करता है।
jfriend00

6
replaceStateएक बेहतर फिट की तरह लगता है, लेकिन pushStateजब तक आप ब्राउज़र में बैक और फॉरवर्ड बटन पर क्लिक करना शुरू नहीं करते हैं, तब तक यह काम करेगा और आपको एहसास होगा कि हिस्ट्री एपीआई के साथ काम करने के लिए पूरी लाइब्रेरी मौजूद है।

@ jfriend00 फ़ंक्शन के व्यवहार के आधार पर, आप जो तीसरे पैरामीटर में जोड़ते हैं, उसे डोमेन नाम के बाद URL में रखा जाएगा, डोमेन के बाद माईनास / www.example.com/ में। एक मौका है कि ओपी कई हो सकता है / डोमेन नाम के बीच और? यदि वेबसाइट एक उप-निर्देशिका में है, इसलिए, यह उसके ऊपर / उसके ऊपर है कि वह बेहतर ढंग से url शोधन कर सके क्योंकि प्रश्न यह था कि url को कैसे चेंज किया जाए, अब इसे कैसे सही तरीके से प्राप्त किया जाए।
मोहम्मद जोरेद

मैं सिर्फ इतना कह रहा हूं कि आपको इसकी बिल्कुल जरूरत नहीं है url.substring(url.lastIndexOf('/') + 1);url.split("?")[0]पहले प्रश्न चिह्न से पहले हिस्सा मिलेगा जो मुझे लगता है कि ओपी ने पूछा है। ओपी का सवाल पूछता है: "मैं ब्राउज़र यूआरएल में"? "के बाद सब कुछ हटाने की कोशिश कर रहा हूं।"
jfriend00

156

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

window.history.replaceState(null, null, window.location.pathname);

3
KISS (रखें बेवकूफ और सरल है)। ओपी ने सभी को हटाने के लिए कहा? और यह सबसे सरल उत्तर है जो आप उसके लिए पूछ सकते हैं!
वॉरफेस

फ़ायरफ़ॉक्स पर काम नहीं किया। ताज़ा करने पर, पैरामीटर अभी भी दिखाई देते हैं। पुश और प्रतिस्थापन दोनों का उपयोग करके काम करता है। window.history.replaceState ({पृष्ठ: location.pathname}, document.title, window.location.pathname); window.history.pushState ({पृष्ठ: location.pathname}, document.title, window.location.pathname);
अजय सिंह

1
history.replaceState (शून्य, शून्य, location.pathname + location.hash) - ऐड location.hash यदि आप उस हिस्से को हटाने के लिए नहीं करना चाहते हैं
eselk

29

ऐसा करने का एक सरल तरीका, किसी भी पृष्ठ पर काम करता है, इसके लिए HTML 5 की आवश्यकता होती है

// get the string following the ?
var query = window.location.search.substring(1)

// is there anything there ?
if(query.length) {
   // are the new history methods available ?
   if(window.history != undefined && window.history.pushState != undefined) {
        // if pushstate exists, add a new state to the history, this changes the url without reloading the page

        window.history.pushState({}, document.title, window.location.pathname);
   }
}

यह आश्चर्यजनक रूप से अच्छी तरह से काम करता है। दुर्भाग्य से, मेरे पास पहला सुराग नहीं है कि यह क्यों काम करता है। सभी का आभार।
मैट क्रीमेंस

1
पहले दो पंक्तियों की जाँच करें कि क्या कुछ है? (सबस्ट्रिंग सिर्फ 'हटाता है?') तब मैं जांचता हूं कि क्या ब्राउज़र नई पुशस्टेट कॉल का समर्थन करता है, और अंत में मैं पुशस्टेट का उपयोग उरोजों के ढेर में एक स्थिति जोड़ने के लिए करता हूं (आप उस स्टैक पर पॉप और यूआरएल कर सकते हैं), खिड़की। .pathname एक स्थानीय url है, जो शून्य से डोमेन नाम और उपसर्ग को घटाता है और उपसर्ग ( domain.com/THIS?notthis )
Martijn Scheffer


23

मैं इसके लिए सबसे अच्छा और सरल तरीका मानता हूँ:

var newURL = location.href.split("?")[0];
window.history.pushState('object', document.title, newURL);

11

अगर मेरे URL के अंत में एक विशेष टैग है जैसे: http://domain.com/?tag=12345 यहाँ उस टैग को हटाने के लिए नीचे दिया गया कोड है, जब भी वह URL में प्रस्तुत करता है:

<script>
// Remove URL Tag Parameter from Address Bar
if (window.parent.location.href.match(/tag=/)){
    if (typeof (history.pushState) != "undefined") {
        var obj = { Title: document.title, Url: window.parent.location.pathname };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        window.parent.location = window.parent.location.pathname;
    }
}
</script>

यह URL से एक या अधिक (या सभी) पैरामीटर निकालने का विचार देता है

Window.location.pathname के साथ आपको मूल रूप से 'से पहले सब कुछ मिलता है?' url में।

var pathname = window.location.pathname; // केवल पथ देता है

var url = window.location.href; // पूर्ण URL लौटाता है


im यकीन है कि यह सवाल का जवाब दे रहा है, लेकिन सवाल ही स्पष्ट नहीं है :)
Martijn Scheffer

@MartijnScheffer सही, मैंने मूल प्रश्न का उत्तर देने के लिए उत्तर को बेहतर बनाया, नोट के लिए धन्यवाद।
तारिक

10

मैं केवल एक परम को हटाना चाहता था success। यहां बताया गया है कि आप यह कैसे कर सकते हैं:

let params = new URLSearchParams(location.search)
params.delete('success')
history.replaceState(null, '', '?' + params + location.hash)

यह भी बरकरार है #hash


URLSearchParamsIE पर काम नहीं करेगा, लेकिन एज के लिए काम किया जा रहा है । आप एक पॉलीफ़िल का उपयोग कर सकते हैं या IE- समर्थन के लिए एक भोले हेल्पर फ़ंक्शन का उपयोग कर सकते हैं:

function take_param(key) {
    var params = new Map(location.search.slice(1).split('&')
        .map(function(p) { return p.split(/=(.*)/) }))   
    var value = params.get(key)
    params.delete(key)
    var search = Array.from(params.entries()).map(
        function(v){ return v[0]+'='+v[1] }).join('&')
    return {search: search ? '?' + search : '', value: value}
}

इसका उपयोग इस तरह किया जा सकता है:

history.replaceState(
    null, '', take_param('success').search + location.hash)

बढ़िया समाधान, क्या 'जोड़ने' का कोई तरीका नहीं है? यदि कोई पाराम पारित नहीं किया जाता है?
रिक्स

2
बेशक @RickS, take_paramपहले से ही कर रही है, लेकिन आप कर सकते हैं URLSearchParamsकरने से भी ऐसा ही: history.replaceState(null, '', (params ? '?' + params : '') + location.hash)। या फिर भी आपको पसंद है।
ओडिन्हो - वेलमॉन्ट


6

इनमें से कोई भी समाधान वास्तव में मेरे लिए काम नहीं करता है, यहां एक IE11- संगत फ़ंक्शन है जो कई मापदंडों को भी हटा सकता है:

/**
* Removes URL parameters
* @param removeParams - param array
*/
function removeURLParameters(removeParams) {
  const deleteRegex = new RegExp(removeParams.join('=|') + '=')

  const params = location.search.slice(1).split('&')
  let search = []
  for (let i = 0; i < params.length; i++) if (deleteRegex.test(params[i]) === false) search.push(params[i])

  window.history.replaceState({}, document.title, location.pathname + (search.length ? '?' + search.join('&') : '') + location.hash)
}

removeURLParameters(['param1', 'param2'])

2
//Joraid code is working but i altered as below. it will work if your URL contain "?" mark or not
//replace URL in browser
if(window.location.href.indexOf("?") > -1) {
    var newUrl = refineUrl();
    window.history.pushState("object or string", "Title", "/"+newUrl );
}

function refineUrl()
{
    //get full url
    var url = window.location.href;
    //get url after/  
    var value = url = url.slice( 0, url.indexOf('?') );
    //get the part after before ?
    value  = value.replace('@System.Web.Configuration.WebConfigurationManager.AppSettings["BaseURL"]','');  
    return value;     
}

1

पृष्ठ ताज़ा किए बिना, सभी मापदंडों को साफ़ करने के लिए, और यदि आप HTML5 का उपयोग कर रहे हैं, तो आप ऐसा कर सकते हैं:

history.pushState({}, '', 'index.html' ); //replace 'index.html' with whatever your page name is

यह ब्राउज़र इतिहास में एक प्रविष्टि जोड़ देगा। आप यह भी विचार कर सकते हैं कि replaceStateक्या आप एक नई प्रविष्टि जोड़ना नहीं चाहते हैं और केवल पुरानी प्रविष्टि को बदलना चाहते हैं।


0

Jquery उपयोग में <

window.location.href =  window.location.href.split("?")[0]

6
वहाँ कुछ भी नहीं है कि jQuery के बारे में है
j08691

0

यहाँ एक ES6 एक लाइनर है जो स्थान हैश को संरक्षित करता है और उपयोग करके ब्राउज़र इतिहास को प्रदूषित नहीं करता है replaceState:

(l=>{window.history.replaceState({},'',l.pathname+l.hash)})(location)

क्या आप इसके बारे में कुछ और जानकारी जोड़ सकते हैं, यह समझना मुश्किल है कि यह क्या कर रहा है।
रिक्स

2
@ रिक्स यह एक आईआईएफई है (तुरंत फंक्शन एक्सप्रेशन), इसीलिए इसे कोष्ठक () (लोकेशन) में लपेटा जाता है। पहला कोष्ठक इसे गुमनाम फ़ंक्शन के रूप में खुद पर रहने में सक्षम बनाता है, अंत में स्थान (स्थान) इसे पास करने वाले फ़ंक्शन को तुरंत आमंत्रित करता है। वैश्विक locationउर्फ window.locationऑब्जेक्ट, इसलिए फ़ंक्शन के पास ग्लोबल्स तक पहुंच है, locationक्योंकि lबाकी सभी प्रतिस्थापनों की तरह बुनियादी रिप्लेसमेंट है, वह पथनाम और हैश (उदाहरण.com/#hash) को नए यूआरएल के रूप में संक्षिप्त कर रहा है। आशा है कि यह सुपाच्य है, अगर मुझे यह पता नहीं है au
कैन राउ

@ का उपयोग क्यों नहीं कर सकते window.history.replaceState({}, '', location.pathname + location.hash)? ;)
फैबियन वॉन एलर्ट्स

@FabianvonEllerts अच्छा प्रश्न वास्तव में, वास्तव में निश्चित रूप से केवल एक ही चीज नहीं है कि आपको location2 बार लिखना है assign अभी तक इसे एक चर 😁 को निर्दिष्ट करने की आवश्यकता नहीं है या क्या इसके लिए अधिक है जॉय?
कर सकते हैं रौ
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.