删除URL参数而不刷新页面 [英] Remove URL parameters without refreshing page
问题描述
我想在？之后删除所有内容在文件准备好的浏览器网址中。
I am trying to remove everything after the "?" in the browser url on document ready.
以下是我的尝试：
jQuery(document).ready(function($) {
var url = window.location.href;
url = url.split('?')[0];
});
我可以这样做并看到以下作品：
I can do this and see it the below works:
jQuery(document).ready(function($) {
var url = window.location.href;
alert(url.split('?')[0]);
});
推荐答案
TL; DR
1-将修改当前网址添加/注入 （新修改的网址）作为新的网址条目到历史列表，使用 pushState ：
TL;DR
1- To modify current URL and add / inject it (the new modified URL) as a new URL entry to history list, use pushState:
window.history.pushState({}, document.title, "/" + "my-new-url.html");
2- 替换当前网址而不添加它到历史记录条目，使用 replaceState ：
2- To replace current URL without adding it to history entries, use replaceState:
window.history.replaceState({}, document.title, "/" + "my-new-url.html");
3- 取决于业务逻辑 ， pushState 在以下情况下非常有用：
3- Depending on your business logic, pushState will be useful in cases such as:
-
你想要的支持浏览器的后退按钮
您希望创建 新网址，添加 /插入/将新网址推送到历史记录条目，并将其设为当前网址
you want to create a new URL, add/insert/push the new URL to history entries, and make it current URL
允许用户书签具有相同参数的页面（显示相同的内容）
allowing users to bookmark the page with the same parameters (to show the same contents)
以编程方式访问 数据通过 stateObj 然后从锚点解析
to programmatically access the data through the stateObj then parse from the anchor
正如我从您的评论中所理解的那样，您希望在不重定向的情况下清理您的URL。
As I understood from your comment, you want to clean your URL without redirecting again.
请注意，您无法更改整个网址。您可以更改域名后面的内容。这意味着您无法更改 www.example.com / ，但您可以更改 .com / 之后的内容
Note that you cannot change the whole URL. You can just change what comes after the domain's name. This means that you cannot change www.example.com/ but you can change what comes after .com/
www.example.com/old-page-name => can become => www.example.com/myNewPaage20180322.php
背景
我们可以使用：
Background
We can use:
1- pushState（）方法如果要将新的修改后的URL添加到历史记录条目。
1- The pushState() method if you want to add a new modified URL to history entries.
2- replaceState（ ）方法如果您想更新/替换当前历史记录条目。
2- The replaceState() method if you want to update/replace current history entry.
.replaceState（）的操作与.pushState（）完全相同，但.replaceState（） 修改当前历史记录条目，而不是创建新条目。请注意，这不会阻止在全局浏览器历史记录中创建新条目。
.replaceState()operates exactly like.pushState()except that.replaceState()modifies the current history entry instead of creating a new one. Note that this doesn't prevent the creation of a new entry in the global browser history.
.replaceState（当你想更新
状态对象或当前历史记录条目的 URL 以响应某些$ b时，特别有用$ b用户操作。
.replaceState() is particularly useful when you want to update the
state object or URL of the current history entry in response to some
user action.
代码
要做到这一点，我将使用此示例的pushState（）方法与以下格式类似：
var myNewURL = "my-new-URL.php";//the new URL
window.history.pushState("object or string", "Title", "/" + myNewURL );
随时用<$替换 pushState c $ c> replaceState 根据您的要求。
Feel free to replace pushState with replaceState based on your requirements.
您可以用 {} 对象或字符串 c $ c>和标题带 document.title 所以最终的陈述将成为：
You can substitute the paramter "object or string" with {} and "Title" with document.title so the final statment will become:
window.history.pushState({}, document.title, "/" + myNewURL );
结果
前两行代码将生成以下URL：
Results
The previous two lines of code will make a URL such as:
https://domain.tld/some/randome/url/which/will/be/deleted/
成为：
https://domain.tld/my-new-url.php
行动
现在让我们尝试不同的方法。假设你需要保留文件的名称。文件名位于最后一个 / 之后，查询字符串？之前。
Action
Now let's try a different approach. Say you need to keep the file's name. The file name comes after the last / and before the query string ?.
http://www.someDomain.com/really/long/address/keepThisLastOne.php?name=john
将是：
http://www.someDomain.com/keepThisLastOne.php
这样的东西会得到工作：
Something like this will get it working:
//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中尝试此操作，此页面网址将会更改：
UPDATE:
For one liner fans, try this out in your console/firebug and this page URL will change:
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 推出。
Note: as Samuel Liew indicated in the comments below, this feature has been introduced only for HTML5.
另一种方法是实际重定向您的页面（但是您将丢失查询字符串`？'，是否仍然需要或数据已被处理？）。
An alternative approach would be to actually redirect your page (but you will lose the query string `?', is it still needed or the data has been processed?).
window.location.href = window.location.href.split("?")[0]; //"http://www.newurl.com";
这篇关于删除URL参数而不刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
