正文 

当前位置： 首页 > 知识 >

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

     2023-02-22     286

关键词：

【中文标题】如何删除 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以实现不显示任何参数。

【讨论】：

使用jQuery替换查询字符串参数并放在地址栏中而不刷新

】使用jQuery替换查询字符串参数并放在地址栏中而不刷新【英文标题】：ReplacethequerystringparamusingjQueryandputitintheaddressbarwithoutrefreshing【发布时间】：2012-07-0513:29:15【问题描述】：我必须使用jQuery或JavaScript将st=6替换为st=7并更新地... 查看详情

使用 htaccess 重定向子域而不更改地址栏中的 URL

】使用htaccess重定向子域而不更改地址栏中的URL【英文标题】：SubdomainredirectwithhtaccesswithoutchangingURLintheaddressbar【发布时间】：2013-09-2012:55:05【问题描述】：我在我的网络主机上设置了一个子域，如下所示：en.domain.compointingtothefol... 查看详情

如何获取地址栏中的url

1.首先打开浏览器，在百度搜索中输入搜索关键字。（演示以搜索“百度一下”为例）2.在搜索页面的顶部就是对应的URL（也就是常说的网页网址）。3.选择地址栏的网址，然后右键鼠标选择【复制】，将网页的网址进行复制。4.... 查看详情

如何从 Zsh 中的 $PATH 中删除路径并将其添加到开头而不重复？

】如何从Zsh中的$PATH中删除路径并将其添加到开头而不重复？【英文标题】：HowcanIremoveapathfrom$PATHinZshandaddittothebeginningwithoutduplication?【发布时间】：2013-04-1701:41:25【问题描述】：我有：PATH=/bar:/foo我想要：PATH=/foo:/bar我不想要：PA... 查看详情

将通配符子域重定向到子目录，而不更改地址栏中的 URL

】将通配符子域重定向到子目录，而不更改地址栏中的URL【英文标题】：Redirectwildcardsubdomainstosubdirectory,withoutchangingURLinaddressbar【发布时间】：2013-05-2110:14:08【问题描述】：我在这里阅读了很多关于此的问题和答案，但似乎没有... 查看详情

C ++如何将对象存储在数组中而不删除它们

】C++如何将对象存储在数组中而不删除它们【英文标题】：C++Howtostoreobjectinarrayswithoutthemdeleted【发布时间】：2021-12-2111:16:45【问题描述】：我想就我在学习C++时遇到的这个问题寻求帮助。我试图将对象直接存储到一个数组中，但... 查看详情

如何在url地址栏中直接写数组参数进行传递

    今天博主遇到这样一个问题，就是如何在浏览器url地址栏中直接写入数组参数进行传递，问了身边几个同事，都没有找到成功的书写方法。就开始怀疑是否可以在地址栏中直接写入数组进行传递。开始在谷歌，... 查看详情

运行 streamlit 时如何在地址栏中显示 URL？

】运行streamlit时如何在地址栏中显示URL？【英文标题】：HowdoesonedisplayaURLintheaddressbarwhenrunningstreamlit?【发布时间】：2022-01-1123:37:53【问题描述】：假设我有一个网站名称。假设我将DNS配置为将该网站定向到特定IP地址（云资源）... 查看详情

获取url地址栏中的参数并返回值

*作用：获取URL地址栏中的参数并返回值*@param需要获取URL中的某个参数，String类型*/functionGetLocationParam(param){ 　　//得到window.location的某个参数 　　varss=(‘‘+window.location).split(‘?‘); 　　if(ss.length>1){ 　　　　varsss=ss[1].split(... 查看详情

如何在 MULE 中的 Flow 结束时检查有效的 URL 并将其路由到 VM ..？

】如何在MULE中的Flow结束时检查有效的URL并将其路由到VM..？【英文标题】：HowtocheckforvalidURL\'sandrouteittoVMattheendofFlowinMULE..?【发布时间】：2012-02-0909:08:48【问题描述】：我在Mule中有一个流程。它包含一个监听端口号和地址的HTTP入... 查看详情

如何在状态栏中隐藏 url 地址？ [复制]

】如何在状态栏中隐藏url地址？[复制]【英文标题】：howtohideurladdressinstatusbar?[duplicate]【发布时间】：2011-06-2919:36:41【问题描述】：可能重复：JavaScript:Changebrowserwindowstatusmessage当我们将鼠标悬停在某些链接文本上时，目标链接会... 查看详情

将数据存储在列表中而不丢失它们（C#）

...存储在2个列表中。当请求时，程序必须显示存储在列表中的最小值和最大值。Income和Outgo值可以根据用户的需要添加任意多次，每次添加一个值，程序都会返回菜单，该菜单有3 查看详情

.htaccess 保留页面而不更改站点 URL

...om并且在站点的根目录中我有一个/holding/index.html文件，我如何编写我的.htaccess来显示持有页面的索引而不显示URL@987654323地址栏中的@。这是我的目录结构：pub 查看详情

如何控制在导航栏中显示的jquery mobile中的url

】如何控制在导航栏中显示的jquerymobile中的url【英文标题】：Howtocontrolurlinjquerymobilewhichdisplayedinnavigatorbar【发布时间】：2017-06-2115:12:18【问题描述】：我正在开发一个只能在一个静态url下工作的jQueryMobile应用程序，它可能会调用... 查看详情

如何修复这些仅发生在 Visual C++ 中而不发生在 DevC++ 中的错误？

】如何修复这些仅发生在VisualC++中而不发生在DevC++中的错误？【英文标题】：HowcanIfixtheseerrorsthatonlyhappensinVisualC++butnotinDevC++?【发布时间】：2014-12-0323:13:47【问题描述】：#include<stdio.h>#include<conio.h>#include<windows.h>typed... 查看详情

如何从 Flutter 中的 URL 下载文件并将其保存在 iOS 共享文件夹中？

】如何从Flutter中的URL下载文件并将其保存在iOS共享文件夹中？【英文标题】：HowtodownloadfilesfromURLinFlutterandsavetheminiOSsharedFolder?【发布时间】：2020-02-1410:45:20【问题描述】：我对Flutter很陌生，我需要以下步骤的解决方案：从url下... 查看详情

地址传值中截取地址栏中的参数

/*截取地址栏中的参数所调用的函数*/functionGetRequest(){ varurl=location.search;//获取url中"?"符后的字串  vartheRequest=newObject();  if(url.indexOf("?")!=-1){     varstr=url 查看详情

如何从 URL 获取值并将其添加为联系表 7 中的隐藏字段

】如何从URL获取值并将其添加为联系表7中的隐藏字段【英文标题】：HowtoGETvaluefromURLandadditashiddenfieldinContactForm7【发布时间】：2018-08-3007:57:37【问题描述】：我正在尝试获取URL参数并将其作为隐藏值添加到联系表单7中。目标是通... 查看详情