Entfernen Sie URL-Parameter, ohne die Seite zu aktualisieren

Ich versuche alles nach dem "?" in der Browser-URL auf Dokument bereit.

Folgendes versuche ich:

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

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

Ich kann dies tun und sehe, dass das Folgende funktioniert:

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

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

TL; DR

1- Verwenden Sie Folgendes, um die aktuelle URL zu ändern und sie (die neue geänderte URL) als neuen URL-Eintrag zur Verlaufsliste hinzuzufügen / einzufügen :pushState

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

2- Um die aktuelle URL zu ersetzen, ohne sie zu Verlaufseinträgen hinzuzufügen , verwenden Sie replaceState:

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

3- Abhängig von Ihrer Geschäftslogik ist pushStatedies in folgenden Fällen hilfreich:

• Sie möchten die Zurück-Schaltfläche des Browsers unterstützen

• Sie möchten eine neue URL erstellen , die neue URL zu Verlaufseinträgen hinzufügen / einfügen / verschieben und sie zur aktuellen URL machen

• Benutzer können die Seite mit denselben Parametern als Lesezeichen speichern (um denselben Inhalt anzuzeigen)

• programmgesteuert auf die Daten zugreifen , indem sie stateObjvom Anker aus analysiert werden

Wie ich aus Ihrem Kommentar verstanden habe, möchten Sie Ihre URL bereinigen, ohne sie erneut umzuleiten.

Beachten Sie, dass Sie nicht die gesamte URL ändern können. Sie können einfach ändern, was nach dem Domainnamen kommt. Dies bedeutet, dass Sie nicht ändern können, www.example.com/aber Sie können ändern, was danach kommt.com/

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

Hintergrund

Wir können benutzen:

1- Die pushState () -Methode, wenn Sie Verlaufseinträgen eine neue geänderte URL hinzufügen möchten .

2- Die replaceState () -Methode, wenn Sie den aktuellen Verlaufseintrag aktualisieren / ersetzen möchten .

.replaceState()funktioniert genau so, .pushState()außer dass .replaceState() der aktuelle Verlaufseintrag geändert wird, anstatt einen neuen zu erstellen. Beachten Sie, dass dies die Erstellung eines neuen Eintrags im globalen Browserverlauf nicht verhindert.

---

.replaceState()Dies ist besonders nützlich, wenn Sie das Statusobjekt oder die URL des aktuellen Verlaufseintrags als Reaktion auf eine Benutzeraktion aktualisieren möchten .

Code

Dazu verwende ich für dieses Beispiel die pushState () -Methode, die ähnlich wie das folgende Format funktioniert:

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

Fühlen Sie sich frei zu ersetzen pushStatemit replaceStatebasierend auf Ihren Anforderungen.

Sie können den Parameter "object or string"durch {}und "Title"mit document.titleersetzen, sodass die endgültige Aussage wie folgt lautet:

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

Ergebnisse

Die beiden vorherigen Codezeilen erstellen eine URL wie:

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

Werden:

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

Aktion

Versuchen wir nun einen anderen Ansatz. Angenommen, Sie müssen den Dateinamen beibehalten. Der Dateiname steht nach dem letzten /und vor der Abfragezeichenfolge ?.

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

Wird sein:

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

So etwas wird es zum Laufen bringen:

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

AKTUALISIEREN:

Probieren Sie dies für Einzeiler-Fans in Ihrer Konsole / Ihrem Firebug aus. Die URL dieser Seite ändert sich:

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

Diese Seiten-URL ändert sich von:

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

Zu

http://stackoverflow.com/22753103#22753103

Hinweis: Wie Samuel Liew in den Kommentaren unten angegeben hat, wurde diese Funktion nur für eingeführt HTML5.

Ein alternativer Ansatz wäre, Ihre Seite tatsächlich umzuleiten (aber Sie verlieren die Abfragezeichenfolge "?", Wird sie noch benötigt oder wurden die Daten verarbeitet?).

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

Diese sind alle irreführend. Sie möchten sie niemals zum Browserverlauf hinzufügen, es sei denn, Sie möchten in einer App für eine einzelne Seite zu einer anderen Seite wechseln. Wenn Sie die Parameter ohne Änderung der Seite entfernen möchten, müssen Sie Folgendes verwenden:

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

Ein einfacher Weg, dies zu tun, funktioniert auf jeder Seite, erfordert 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);
   }
}

Ich glaube, die beste und einfachste Methode dafür ist:

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

Wenn ich am Ende meiner URL ein spezielles Tag habe, wie z. B .: http://domain.com/?tag=12345 Hier ist der folgende Code, um dieses Tag zu entfernen, wenn es in der URL angezeigt wird:

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

Dies gibt die Idee, einen oder mehrere (oder alle) Parameter aus der URL zu entfernen

Mit window.location.pathname erhalten Sie im Grunde alles vor '?' in der URL.

var pathname = window.location.pathname; // Gibt nur den Pfad zurück

var url = window.location.href; // Gibt die vollständige URL zurück

Ich wollte nur einen Parameter entfernen success. So können Sie das machen:

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

Dies bleibt auch erhalten #hash.

URLSearchParamsfunktioniert nicht im IE, wird aber für Edge bearbeitet . Sie können eine Polyfill oder eine naive Hilfsfunktion für die IE-Unterstützung verwenden:

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

Dies kann verwendet werden wie:

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

Bessere Lösung:

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

Keine dieser Lösungen hat bei mir wirklich funktioniert. Hier ist eine IE11-kompatible Funktion, mit der auch mehrere Parameter entfernt werden können:

/**
* 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'])

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

So löschen Sie alle Parameter, ohne eine Seitenaktualisierung durchzuführen, UND wenn Sie HTML5 verwenden, können Sie Folgendes tun:

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

Dadurch wird ein Eintrag im Browserverlauf hinzugefügt. Sie können auch überlegen, replaceStateob Sie keinen neuen Eintrag hinzufügen und nur den alten Eintrag ersetzen möchten.

Verwenden Sie in jquery <

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

Hier ist ein ES6-Einzeiler, der den Standort-Hash beibehält und den Browserverlauf nicht verschmutzt, indem er Folgendes verwendet replaceState:

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