Usuń parametry adresu URL bez odświeżania strony

Próbuję usunąć wszystko po znaku „?” w adresie URL przeglądarki, gdy dokument jest gotowy.

Oto, czego próbuję:

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

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

Mogę to zrobić i zobaczyć, jak działa poniżej:

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

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

TL; DR

1- Aby zmodyfikować aktualny adres URL i dodać / wstawić go (nowy zmodyfikowany adres URL) jako nowy wpis adresu URL do listy historii, użyj pushState:

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

2- Aby zamienić aktualny adres URL bez dodawania go do wpisów historii, użyj replaceState:

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

3- W zależności od logiki biznesowej , pushStateprzyda się w takich przypadkach, jak:

• chcesz obsługiwać przycisk Wstecz w przeglądarce

• chcesz utworzyć na nowy adres URL, add / insert / popchnąć nowy adres URL do historii zgłoszeń, i sprawiają, że aktualny adres URL

• umożliwiając użytkownikom dodania zakładek do strony z tymi samymi parametrami (aby wyświetlić te same treści)

• aby programowo uzyskać dostęp do danych za pośrednictwem stateObjnastępnie analizy z kotwicy

Jak zrozumiałem z twojego komentarza, chcesz wyczyścić swój adres URL bez ponownego przekierowywania.

Pamiętaj, że nie możesz zmienić całego adresu URL. Możesz po prostu zmienić to, co pojawia się po nazwie domeny. Oznacza to, że nie możesz zmienić, www.example.com/ale możesz zmienić to, co nastąpi później.com/

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

tło

Możemy użyć:

1- Metoda pushState (), jeśli chcesz dodać nowy zmodyfikowany adres URL do wpisów historii.

2- Metoda replaceState (), jeśli chcesz zaktualizować / zamienić bieżący wpis historii.

.replaceState()działa dokładnie tak samo, .pushState()z wyjątkiem tego, że .replaceState() modyfikuje bieżący wpis historii zamiast tworzyć nowy. Zwróć uwagę, że nie zapobiega to tworzeniu nowego wpisu w globalnej historii przeglądarki.

---

.replaceState()jest szczególnie przydatne, gdy chcesz zaktualizować obiekt stanu lub adres URL bieżącego wpisu historii w odpowiedzi na jakąś akcję użytkownika.

Kod

Aby to zrobić, w tym przykładzie użyję metody pushState (), która działa podobnie do następującego formatu:

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

Zapraszam do wymiany pushStatezreplaceState zależności od wymagań.

Można zastąpić paramter "object or string"z {}i "Title"z document.titletak ostateczna statment będzie:

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

Wyniki

Poprzednie dwa wiersze kodu utworzą adres URL, taki jak:

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

Zostać:

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

Akcja

Teraz spróbujmy innego podejścia. Powiedz, że musisz zachować nazwę pliku. Nazwa pliku pojawia się po ostatnim /i przed ciągiem zapytania ?.

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

Będzie:

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

Coś takiego sprawi, że będzie działać:

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

AKTUALIZACJA:

Dla fanów z jednym liniowcem wypróbuj to w konsoli / firebug, a adres URL tej strony ulegnie zmianie:

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

Adres URL tej strony zmieni się z:

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

Do

http://stackoverflow.com/22753103#22753103

Uwaga: jak Samuel Liew wskazał w komentarzach poniżej, ta funkcja została wprowadzona tylko dla HTML5.

Alternatywnym podejściem byłoby przekierowanie strony (ale utracisz ciąg zapytania `? ', Czy jest nadal potrzebny, czy dane zostały przetworzone?).

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

To wszystko jest mylące, nigdy nie chcesz dodawać do historii przeglądarki, chyba że chcesz przejść do innej strony w aplikacji z jedną stroną. Jeśli chcesz usunąć parametry bez zmiany strony, musisz użyć:

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

prosty sposób, działa na każdej stronie, wymaga 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);
   }
}

Uważam, że najlepszą i najprostszą metodą jest:

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

jeśli mam specjalny tag na końcu mojego adresu URL, taki jak: http://domain.com/?tag=12345 Oto poniższy kod służący do usuwania tego tagu, gdy pojawia się w adresie 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>

Daje to pomysł usunięcia jednego lub więcej (lub wszystkich) parametrów z adresu URL

Z window.location.pathname w zasadzie otrzymujesz wszystko przed '?' w adresie URL.

var pathname = window.location.pathname; // Zwraca tylko ścieżkę

var url = window.location.href; // Zwraca pełny adres URL

Chciałem usunąć tylko jeden parametr success. Oto jak możesz to zrobić:

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

To również pozostaje #hash.

URLSearchParamsnie będzie działać w IE, ale pracuję nad Edge . Możesz użyć polyfill lub możesz użyć naiwnej funkcji pomocniczej do obsługi 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}
}

Można tego użyć na przykład:

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

Lepsze rozwiązanie:

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

Żadne z tych rozwiązań naprawdę nie działało dla mnie, oto funkcja zgodna z IE11, która może również usunąć wiele parametrów:

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

Aby wyczyścić wszystkie parametry bez odświeżania strony ORAZ jeśli korzystasz z HTML5, możesz to zrobić:

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

Spowoduje to dodanie wpisu do historii przeglądarki. Możesz również rozważyć replaceState, czy nie chcesz dodać nowego wpisu i po prostu chcesz zastąpić stary wpis.

W jquery użyj <

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

Oto jedna linijka ES6, która zachowuje skrót lokalizacji i nie zanieczyszcza historii przeglądarki za pomocą replaceState:

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