在不刷新页面的情况下删除 URL 参数

小开

最佳答案

博士TL;

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到历史条目，并使其为当前URL
允许用户书签具有相同参数的页面(以显示相同的内容)
以编程方式访问，数据到stateObj，然后从锚解析

正如我从你的评论中理解的那样，你想要在不重定向的情况下清理你的URL。

注意，您不能更改整个URL。您可以更改域名后面的内容。这意味着你不能改变www.example.com/，但你可以改变.com/之后的内容

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

背景

我们可以用:

1- pushState()方法如果你想将一个新的修改的URL添加到历史条目。

2- replaceState()方法如果你想更新/替换当前的历史条目。

.replaceState()的操作与.pushState()完全相同，除了.replaceState() 修改当前历史记录条目而不是创建一个新条目。注意，这并不会阻止在全局浏览器历史记录中创建新条目。

.replaceState()在你想更新的时候特别有用 state对象或当前历史记录项的URL来响应一些用户操作。< / p >

代码

为此，我将在本例中使用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;
}

更新:

对于一个班轮的粉丝，在你的控制台/firebug中尝试一下，这个页面的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:

当最后一个参数为空字符串时，Firefox似乎会忽略window.history.pushState({}, document.title, '');。添加斜杠('/')如预期的那样工作，并删除了url字符串的整个查询部分。 Chrome似乎可以接受空字符串。

小开

清除所有参数，不做页面刷新，如果你使用HTML5，那么你可以这样做:

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

这将在浏览器历史记录中添加一个条目。你也可以考虑replaceState，如果你不想添加一个新的条目，只是想替换旧的条目。

小开

如果我在我的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

小开

一个简单的方法做到这一点，工作在任何页面，需要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);
}
}

小开

更好的解决方案:

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

小开

这些都是误导，你永远不想添加到浏览器历史记录，除非你想在单页应用程序中进入不同的页面。如果你想在不改变页面的情况下删除参数，你必须使用:

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

小开

在Javascript中:

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

小开

下面是ES6的一行代码，它通过使用replaceState保存位置散列，并且不会污染浏览器历史记录:

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

小开

我只想删除一个参数success。你可以这样做:

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

这也保留了#hash。

URLSearchParams不能在IE上运行，但是正在为Edge制作。你可以使用填充材料或者可以使用naïve helper函数来支持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)

小开

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

小开

我认为最好和最简单的方法是:

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

小开

这些解决方案都不适合我，这里有一个兼容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'])

小开

单行解决方案:

history.replaceState && history.replaceState(
null, '', location.pathname + location.search.replace(/[\?&]my_parameter=[^&]+/, '').replace(/^&/, '?')
);

https://gist.github.com/simonw/9445b8c24ddfcbb856ec

小开

为我运行这个js清除当前url上的任何参数，而不刷新页面。

window.history.replaceState({}, document.title, location.protocol + '//' + location.host + location.pathname);

小开

        var currURL = window.location.href;
var url = (currURL.split(window.location.host)[1]).split("?")[0];
window.history.pushState({}, document.title, url);

这将是一种只清除查询字符串的更干净的方式。