删除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- 修改当前网址和添加/注入 （新修改的网址）作为历史记录列表的新网址条目，使用pushState：

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

2-要替换当前网址而不将添加到历史记录条目中，请使用replaceState：

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

业务逻辑

3- 取决于，pushState在以下情况下非常有用：

• 您想支持浏览器的后退按钮

• 您希望创建 新网址，添加 /插入/推送新网址 历史条目，并将其设为当前网址

• 允许用户使用相同的参数书签页面（显示相同的内容）

• 通过stateObj以编程方式访问 数据，然后从锚点解析

---

正如我从您的评论中所理解的那样，您希望在不重定向的情况下清理您的网址。

请注意，您无法更改整个网址。您可以更改域名后面的内容。这意味着您无法更改www.example.com/，但可以更改.com/

之后的内容

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

背景

我们可以使用：

1- The pushState() method如果您要将新的修改过的网址添加到历史记录条目中。

2- The replaceState() method如果您想更新/替换当前历史记录条目。

  

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

     

<小时/>   当您想更新时，.replaceState()特别有用   状态对象或当前历史记录条目的 URL 以响应某些情况   用户操作。

---

代码

为此，我将使用The pushState() method作为此示例，其工作方式与以下格式类似：

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

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

更好的解决方案：

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

Answer 6

如果我的网址末尾有一个特殊标记，例如：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 7

我只想删除一个参数success。这是你如何做到这一点：

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

这也保留#hash。

URLSearchParams不适用于IE，但being worked on for Edge。您可以use a polyfill或者a使用天真的帮助函数来支持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 8

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

这将是一种仅清除查询字符串的更简洁的方法。

Answer 9

要清除所有参数，而不进行页面刷新，如果您使用的是HTML5，则可以执行以下操作：

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

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

Answer 10

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

Answer 11

单行解决方案：

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

信用：https://gist.github.com/simonw/9445b8c24ddfcbb856ec

Answer 12

这是一个ES6 one liner，它使用replaceState保留位置哈希并且不会污染浏览器历史记录：

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

Answer 13

这些解决方案中没有一个对我真正有用，这是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 14

为我运行此 js 清除了当前 url 上的所有参数，而无需刷新页面。

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

Answer 15

在jquery中使用＆lt;

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