在不刷新网页的情况下移除网址参数

javascript jquery

2022-08-30 00:46:00

我正在尝试删除文档准备就绪的浏览器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]);
});

答案 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，添加/插入/将新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()当您想要更新当前历史记录条目的状态对象或 URL 以响应某些用户操作时，它特别有用。

法典

为此，我将对此示例使用 pushState（）方法，其工作方式类似于以下格式：

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

请根据您的要求随意更换。pushStatereplaceState

您可以将参数替换为和，因此最终语句将变为："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

注意：正如 Samuel Liew 在下面的评论中指出的那样，此功能仅为 .HTML5

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

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

注2：

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

答案 2

这些都是误导性的，你永远不想添加到浏览器历史记录中，除非你想在单页应用中转到其他页面。如果要在不更改页面的情况下删除参数，则必须使用：

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