Supprimer les paramètres d'URL sans actualiser la page

J'essaye de tout supprimer après le "?" dans l'url du navigateur sur le document prêt.

Voici ce que j'essaye:

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

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

Je peux le faire et le voir fonctionne ci-dessous:

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

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

TL; DR

1- Pour modifier l' URL en cours et ajouter / inject il (la nouvelle URL modifiée) comme une nouvelle entrée d'URL à la liste de l' historique, l' utilisation pushState:

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

2- Pour remplacer l'URL actuelle sans l'ajouter aux entrées d'historique, utilisez replaceState:

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

3- En fonction de votre logique métier , pushStatesera utile dans des cas tels que:

• vous souhaitez prendre en charge le bouton de retour du navigateur

• vous voulez créer une nouvelle URL, ajouter / insérer / pousser la nouvelle URL vers les entrées d' historique et en faire l'URL actuelle

• permettre aux utilisateurs de mettre en signet la page avec les mêmes paramètres (pour afficher le même contenu)

• par programmation accéder aux données par l' stateObjanalyser puis de l'ancre

Comme je l'ai compris de votre commentaire, vous souhaitez nettoyer votre URL sans rediriger.

Notez que vous ne pouvez pas modifier toute l'URL. Vous pouvez simplement changer ce qui vient après le nom du domaine. Cela signifie que vous ne pouvez pas changer www.example.com/mais que vous pouvez changer ce qui vient après.com/

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

Contexte

On peut utiliser:

1- La méthode pushState () si vous souhaitez ajouter une nouvelle URL modifiée aux entrées d'historique.

2- La méthode replaceState () si vous souhaitez mettre à jour / remplacer l' entrée actuelle de l' historique.

.replaceState()fonctionne exactement comme .pushState()sauf que cela .replaceState() modifie l' entrée d' historique actuelle au lieu d'en créer une nouvelle. Notez que cela n'empêche pas la création d'une nouvelle entrée dans l'historique global du navigateur.

---

.replaceState()est particulièrement utile lorsque vous souhaitez mettre à jour l'objet d'état ou l' URL de l'entrée d'historique actuelle en réponse à une action de l'utilisateur.

Code

Pour ce faire, j'utiliserai la méthode pushState () pour cet exemple qui fonctionne de manière similaire au format suivant:

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

N'hésitez pas à remplacer pushStatepar en replaceStatefonction de vos besoins.

Vous pouvez remplacer le paramètre "object or string"par {}et "Title"par document.titleainsi la déclaration finale deviendra:

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

Résultats

Les deux lignes de code précédentes créeront une URL telle que:

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

Devenir:

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

action

Essayons maintenant une approche différente. Disons que vous devez conserver le nom du fichier. Le nom de fichier vient après la dernière /et avant la chaîne de requête ?.

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

Sera:

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

Quelque chose comme ça le fera fonctionner:

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

METTRE À JOUR:

Pour les fans d'un seul liner, essayez ceci dans votre console / firebug et cette URL de page changera:

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

L'URL de cette page changera de:

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

À

http://stackoverflow.com/22753103#22753103

Remarque: comme Samuel Liew l'a indiqué dans les commentaires ci-dessous, cette fonctionnalité n'a été introduite que pour HTML5.

Une autre approche consisterait à rediriger réellement votre page (mais vous perdrez la chaîne de requête «?», Est-elle toujours nécessaire ou les données ont-elles été traitées?).

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

Tout cela est trompeur, vous ne voulez jamais ajouter à l'historique du navigateur à moins que vous ne souhaitiez accéder à une page différente dans une seule application. Si vous souhaitez supprimer les paramètres sans modification de la page, vous devez utiliser:

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

un moyen simple de le faire, fonctionne sur n'importe quelle page, nécessite 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);
   }
}

Je crois que la méthode la meilleure et la plus simple pour cela est:

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

si j'ai une balise spéciale à la fin de mon URL comme: http://domain.com/?tag=12345 Voici le code ci-dessous pour supprimer cette balise chaque fois qu'elle se présente dans l'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>

Cela donne l'idée de supprimer un ou plusieurs (ou tous) paramètres de l'URL

Avec window.location.pathname, vous obtenez en gros tout avant '?' dans l'url.

var chemin d'accès = window.location.pathname; // Renvoie le chemin uniquement

var url = window.location.href; // Renvoie l'URL complète

Je voulais supprimer un seul paramètre success. Voici comment procéder:

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

Cela conserve également #hash.

URLSearchParamsne fonctionnera pas sur IE, mais en cours de travail pour Edge . Vous pouvez utiliser un polyfill ou un peut utiliser une fonction d'assistance naïve pour le support 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}
}

Cela peut être utilisé comme:

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

Meilleure solution:

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

Aucune de ces solutions n'a vraiment fonctionné pour moi, voici une fonction compatible IE11 qui peut également supprimer plusieurs paramètres:

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

Pour effacer tous les paramètres, sans actualiser la page, ET si vous utilisez HTML5, vous pouvez le faire:

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

Cela ajoutera une entrée dans l'historique du navigateur. Vous pouvez également envisager replaceStatesi vous ne souhaitez pas ajouter une nouvelle entrée et souhaitez simplement remplacer l'ancienne entrée.

Dans jquery, utilisez <

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

Voici un ES6 one liner qui préserve le hachage de l'emplacement et ne pollue pas l'historique du navigateur en utilisant replaceState:

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