如何在URL中删除参数并在地址栏中显示它，而不会在Javascript中引起重定向

How to remove parameters in URL and display it in address bar without causing redirect in Javascript?

本文关键字：Javascript 重定向 显示 删除 URL 参数 地址栏      更新时间：2023-09-26

关于如何在没有参数的情况下提取URL，我找到了许多答案。

如何重写地址栏中的URL而不导致页面重新加载新URL?

shortURL = top.location.href.substring(0, top.location.href.indexOf('?'));
top.location.href = shortURL // Causes redirect

目标是在Javascript中提取参数，但不显示在地址栏中。

在支持历史对象的现代浏览器中，您可以使用history.replaceState()或history.pushState()来更改当前URL而不更改当前页面。您可以更改的内容是有限制的(例如，出于安全原因，您不能以这种方式更改域/起源)。

查看这些方法的摘要。

浏览器历史记录是您在浏览会话中所处位置的记录。.replaceState()允许您将历史列表中的当前项目替换为不同的项目。.pushState()在浏览器历史记录中增加了一个新项目，并且都在不重新加载页面的情况下更改了浏览器URL栏中显示的URL。您可以根据您希望浏览器的"返回"按钮对该特定页面条目的行为来选择使用哪种方法。

注意:这些api在IE 10和更高版本中支持。

在不支持历史API的旧浏览器版本中，您可以在不重新加载页面的情况下更改URL的唯一部分是URL末尾的哈希标签(#符号之后的部分)

在html5中，重写url而不重新加载页面是可能的(出于安全原因，您仍然不能更改域名)，使用历史api您可以编写:

history.replaceState("object or string", "title", "/another-new-url");

，其中前两个参数是任意的，第三个参数是新的url(不包括域名)。如果您想启用返回按钮返回到以前的url，请使用pushState而不是上面的replaceState。在这篇博客文章中阅读更多关于这些函数的信息。

关于浏览器的支持，在最近的Firefox和Chrome版本中支持，但仅在IE10+中支持，这还不是很常见。详细信息请参见兼容性矩阵或浏览器实现细节。

如果不重定向，则无法更改地址栏中的值。这将是一个网络钓鱼骗子的梦想成真!

你可以，但是，改变片段标识符:(在JavaScript中，window.location.hash值)

<!DOCTYPE html>
<html>
<head>
<title>This is a test</title>
<script>
window.onload = function() {
    window.location.hash = "Loaded!";
    document.getElementById("click-me").onclick = function() {
        window.location.hash = "Click!";
        document.getElementById("click-me").onclick = function() {
            window.location.hash = "Clicked AGAIN!";
        };
    };
}
</script>
<body>
<div>
<input type="button" id="click-me" value="click me!" />
</div>
</body>
</html>

但是改变查询字符串会重定向页面

您可以使用新的pushstate，这是HTML 5历史API的一部分，它允许您更改URL而无需重新加载浏览器。

查看http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate获取快速示例，查看http://diveintohtml5.info/history.html获取更深入的示例和限制:

我不认为有这样的可能性，我的意思是你可能会重写URL后，它加载并添加返回false，所以你可以防止重新加载，但否则你将不得不做一个表单POST URL上实现没有参数显示。

相关文章：