删除URL参数而不刷新页面

2024-04-27

我试图删除“？”之后的所有内容在文档准备好的浏览器 URL 中。

这是我正在尝试的：

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

TL;DR

To modify当前网址和添加/注入 it （新修改的网址）作为历史列表的新 URL 条目，使用pushState:

window.history.pushState({}, document.title, "/" + "my-new-url.html");
To replace当前网址不添加它到历史记录条目，使用replaceState:

window.history.replaceState({}, document.title, "/" + "my-new-url.html");
取决于在你的商业逻辑, pushState在以下情况下会很有用：
- 你想支持浏览器返回键
- 你想要create a new URL, add/插入/推new URL to history条目，并将其设置为当前 URL
- 允许用户bookmark具有相同参数的页面（显示相同的内容）
- 以编程方式access the data通过stateObj然后从锚点解析

据我从您的评论中了解到，您希望清理您的网址而不再次重定向。

请注意，您无法更改整个 URL。您只需更改域名后面的内容即可。这意味着你无法改变www.example.com/但你可以改变之后发生的事情.com/

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

背景

我们可以用：

The pushState() method https://developer.mozilla.org/en-US/docs/Web/API/History/pushState如果你想添加a new修改了历史记录条目的 URL。
The replaceState() method https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState如果你想更新/替换current历史条目。

.replaceState()运作方式完全一样.pushState()除了那个.replaceState() 修改当前历史记录条目而不是创建一个新条目。请注意，这不会阻止在全局浏览器历史记录中创建新条目。

.replaceState()当您想要时特别有用update状态对象或URL响应某些用户操作的当前历史记录条目。

Code

为此，我将使用PushState() 方法 https://developer.mozilla.org/en-US/docs/Web/API/History/pushState对于此示例，其工作方式类似于以下格式：

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

随意更换pushState with replaceState根据您的要求。

您可以替换该参数"object or string" with {} and "Title" with document.title所以最终的语句将变成：

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

Results

前两行代码将生成一个 URL，例如：

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

成为：

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

Action

现在让我们尝试一种不同的方法。假设您需要保留文件名。文件名位于最后一个之后/和查询字符串之前?.

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

Will be:

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

UPDATE:

对于 One liner 粉丝，请在控制台/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

Note: as 塞缪尔·刘在下面的评论中指出，此功能仅适用于HTML5.

另一种方法是实际重定向您的页面（但您将丢失查询字符串“？”，是否仍然需要它或数据已被处理？）。

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

Note 2:

火狐浏览器似乎忽略了window.history.pushState({}, document.title, '');当最后一个参数是空字符串时。添加斜杠 ('/'）按预期工作并删除了 url 字符串的整个查询部分。 Chrome 似乎可以使用空字符串。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery