如何删除 URL 中的参数并将其显示在地址栏中而不导致 JavaScript 中的重定向？

发布于 2024-12-21 09:12:02 字数 268 浏览 2 评论 0原文

我找到了许多关于如何提取不带参数的 URL 的答案。

如何重写地址栏中的 URL，而不导致页面使用新 URL 重新加载？

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

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

原文

I have found numerous answers on how to extract the URL without the parameters.

How do you rewrite the URL in the address bar without causing the page to reload with the new URL?

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

The goal is to extract the parameters in Javascript but not display them in the address bar.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我是有多爱你 2024-12-28 09:12:02

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

有关这些方法的摘要，请参阅此处。

浏览器历史记录是您在浏览会话中所处位置的记录。 .replaceState() 允许您将历史列表中的当前项目替换为其他项目。 .pushState() 在浏览器历史记录中添加一个新项目，并且都可以更改浏览器 URL 栏中显示的 URL，而无需重新加载页面。您可以根据您希望浏览器的“后退”按钮对该特定页面条目的行为方式来选择使用哪种方法。

注意：IE 10 及更高版本支持这些 API。

在不支持历史记录 API 的旧浏览器版本中，无需重新加载页面即可更改 URL 的唯一部分是 URL 末尾的哈希标记（# 符号后面的部分）。

回复收藏 0 原文

梦中的蝴蝶 2024-12-28 09:12:02

在html5中，可以在不重新加载页面的情况下重写url（出于安全原因仍然不能更改域名），使用history api您可以编写：

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

其中前两个参数在某种程度上是任意的，第三个参数是新的url （不包括域名）。如果您想启用后退按钮以返回上一个网址，请使用 pushState 而不是上面的 replaceState。在这篇博客文章。

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

In html5, rewriting url without reloading the page is possible (still you can not change the domain name for security reasons), using history api you can write:

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

in which the first two parameters are somehow arbitrary, and the third parameter is the new url (not including domain name). If you want to enable back button for returning to previous url, use pushState instead of replaceState above. Read more about these functions in this blog post.

Regarding browser support, it is supported in recent Firefox and Chrome versions, but only in IE10+, which is not very common yet. For details see compatibility matrix or browser implementation details.

回复收藏 0 原文

若沐 2024-12-28 09:12:02

如果不进行重定向，则无法更改地址栏中的值。这将是网络钓鱼诈骗者的梦想成真！

不过，您可以更改片段标识符：（在 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>

但是更改查询字符串将重定向页面。

You can't change the value in the address bar without redirecting. That would be a phishing scammer's dream come true!

You can, however, change the fragment identifier: (in JavaScript, the window.location.hash value)

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

But changing the query string will redirect the page.

回复收藏 0 原文