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

Posted 2023-02-22

技术标签:

【中文标题】如何删除 URL 中的参数并将其显示在地址栏中而不会导致 Javascript 中的重定向？【英文标题】：How to remove parameters in URL and display it in address bar without causing redirect in Javascript? 【发布时间】：2012-01-20 14:20:58 【问题描述】：

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

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

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

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

【问题讨论】：

【参考方案1】：

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

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

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

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

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

【讨论】：

随着 html5 和 pushState 的出现不再是正确答案（更多 here ） @FloatingRock - 更新了 HTML5 .replaceState() 和 .pushState() 的答案。【参考方案2】：

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

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

其中前两个参数是任意的，第三个参数是新的url（不包括域名）。如果要启用返回按钮以返回上一个 url，请使用pushState 而不是上面的replaceState。在blog post 中阅读有关这些功能的更多信息。

关于浏览器支持，最近的Firefox和Chrome版本都支持，但只在IE10+中，还不是很常见。详情见compatibility matrix或browser implementation details。

【讨论】：

【参考方案3】：

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

但是，您可以更改 fragment identifier：（在 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>

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

【讨论】：

【参考方案4】：

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

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

【讨论】：

【参考方案5】：

我认为这不可能，我的意思是您可能可以在加载后重写 URL 并添加 return false，因此您可以防止重新加载，否则您必须在 url 上执行表单 POST以实现不显示任何参数。

【讨论】：

以上是关于如何删除 URL 中的参数并将其显示在地址栏中而不会导致 Javascript 中的重定向？的主要内容，如果未能解决你的问题，请参考以下文章

通过 AsyncTask 下载图像并将其显示在 Imageview 中而不存储在 sdcard 中

通过AsyncTask下载图像并将其显示在Imageview中而不存储在SD卡中