删除URL参数而不刷新页面

Question

我想在"？"之后删除所有内容.在文件准备好的浏览器网址中.

这是我正在尝试的:

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]);
});

Answer 1

TL; DR

1到修改当前URL和添加/注入它(修改后的新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,添加 /插入/推新网址到历史条目,并使其成为当前网址

• 允许用户使用相同的参数为页面添加书签(以显示相同的内容)

• 以编程访问的数据通过stateObj接着从锚解析

正如我从您的评论中所理解的那样,您希望在不重定向的情况下清理您的URL.

请注意,您无法更改整个网址.您可以更改域名后面的内容.这意味着你无法改变,www.example.com/但你可以改变之后发生的事情.com/

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

背景

我们可以用:

1- 如果要将新修改的URL 添加到历史记录条目,则使用pushState()方法.

2- 如果要更新/替换当前历史记录条目,则使用replaceState()方法.

.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因此最终statment将变为:

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中尝试此操作,此页面网址将更改:

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

此页面网址将更改为:

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

至

http://stackoverflow.com/22753103#22753103

注意:正如Samuel Liew在下面的评论中指出的那样,此功能仅适用于HTML5.

另一种方法是实际重定向您的页面(但是您将丢失查询字符串`？',是否仍然需要或数据已被处理？).

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

Answer 2

这些都是误导性的,您永远不想添加到浏览器历史记录,除非您想要在单页面应用程序中转到不同的页面.如果要在不更改页面的情况下删除参数,则必须使用:

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

Answer 3

一个简单的方法,适用于任何页面,需要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);
   }
}

Answer 4

我相信最好和最简单的方法是:

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

Answer 5

如果我的网址末尾有一个特殊标记,例如:http://domain.com/？ tag = 12345 以下是代码,只要它在网址中显示,就会删除该代码:

<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,您基本上可以获得"？"之前的所有内容.在网址中.

var pathname = window.location.pathname; //仅返回路径

var url = window.location.href; //返回完整的URL

Answer 6

更好的方案:

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

Answer 7

这些解决方案都没有真正对我有用，这是一个兼容 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'])

Answer 8

我只想删除一个参数success。这是您可以执行的操作：

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

这也保留了下来#hash。

URLSearchParams不会在IE上运行，但会在Edge上运行。您可以使用polyfill或可以使用朴素的辅助函数来支持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)

Answer 9

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

这将是仅清除查询字符串的更干净的方法。