页面加载后如何从 url 中删除查询字符串？答案

【问题标题】：How can I remove the query string from the url after the page loads?页面加载后如何从 url 中删除查询字符串？
【发布时间】：2012-05-28 21:06:27
【问题描述】：

我有一个附有长查询字符串的 URL。页面加载后，我不需要查询字符串。所以我想在不重新加载页面的情况下从地址栏中删除查询字符串。

我试过parent.location.hash = '';和window.location.href = '/#'

他们没有什么不同。

【问题讨论】：

hash 是在# 之后的那个。查询字符串是? 之后但# 之前的字符串。你在做什么没有意义。为什么要隐藏它？
阅读stackoverflow.com/questions/136458/…
请测试我的代码现在是否可以工作:)

标签： javascript html url query-string

【解决方案1】：

如果不重新加载页面，您将无法做到这一点，想象一下您是否可以在浏览器地址栏中放置您想要的任何内容？安全乐趣:)

虽然您现在可以使用新的history API 在 HTML5 中执行此操作（仅适用于支持它的浏览器），但实际上，您的方案最好需要重写而不是包含它（似乎大锤敲碎坚果）。

正如您所说，页面加载后您不需要查询字符串，您应该真的回帖，然后在完成处理后重定向到另一个 URL。

【讨论】：

这不是真的。 history API 使之成为可能。它有一些限制，主要是您不能将 URL 更改为出现在不同来源的 URL，但问题并不要求它切换来源。
@Quentin 你说得对，我不能删除它（它已被接受）所以我已经编辑了它。我也为你 +1 了 :)

【解决方案2】：

在modern browsers 中使用the history api 可以实现这一点，但可能不是解决问题的最佳方法。

history.replaceState({}, 'some title', '/');

听起来您最好先处理数据，然后重定向到主页，而不是直接返回 HTML 文档。

由于您不想保留 URL，因此它对书签没有用处，因此您最好发出 POST 请求。

这表明您应该使用POST-Redirect-GET pattern。

【讨论】：

我不能使用 POST，因为它是在查询字符串中传递的分析数据
我不明白这是怎么回事。即使是这样，您仍然可以重定向。

【解决方案3】：

使用history.replaceState({}, "Title", "page.html");

pushState 的语法相同。但是你必须想办法让 IE 明白这一点。

更好的方法是使用 Apache mod_rewrite 模块。它非常易于使用。

【讨论】：

但是 mod_rewrite 会在页面加载前重定向到修剪后的 url

【解决方案4】：

您可以通过使用POST 而不是GET 来完全避免查询字符串。

【讨论】：

我不能使用 POST，因为它是在查询字符串中传递的分析数据

【解决方案5】：

更新的代码现在可以使用了

只需在您要更改其链接的页面中添加以下代码。

// javascript function

   function buildLin(first) {
    var firs = first.toString()
       //alert(firs);
       //document.getElementById("team").value = "1";
           document.location.hash = "#" + firs.replace(/ /g, "_");
        //alert(document.location.hash);
    }

 //jQuery to call above function after page loads

  $(document).ready(function () {
      buildLin(2);
  });

别忘了加http://code.jquery.com/jquery-latest.js 在您的页面上

【讨论】：

感谢您的代码。但它在 url 的末尾添加了一个 #2（在查询字符串之后）。我想在页面加载后从 url 中删除查询字符串。

【解决方案6】：

正如其他人所说，您可以在现代浏览器（IE10+、FF4+、Chrome5+）中使用History API 执行此操作。答案中没有完整的示例，所以我想分享我的解决方案，因为我只是需要做同样的事情：

history.pushState(null, "", location.href.split("?")[0]);

如果你使用Modernizr，你也可以像这样检查History API是否可用：

if (Modernizr.history) {
    history.pushState(null, "", location.href.split("?")[0]);
}

【讨论】：

【解决方案7】：

我在我的个人项目中使用此代码片段，我需要在不重新加载的情况下删除 URL 参数：

var newURL = location.href.split("?")[0];
window.history.pushState('object', document.title, newURL);

【讨论】：

【解决方案8】：

我想再添加一种方法来做到这一点，尤其是对于那些使用$routeProvider 的人。

正如在其他一些答案中提到的那样，您可以使用：

var yourCurrentUrl = window.location.href.split('?')[0]; 
window.history.replaceState({}, '', yourCurrentUrl );

或通过在历史堆栈中创建新记录：

window.history.pushState({}, '', yourCurrentUrl );

有关使用 history.pushState 和 history.replaceState 的非常详细和漂亮的解释，您可以阅读 this post on SO 。

但是，如果您在应用程序中使用 Angular$routeProvider，那么如果与任何现有模式匹配，它仍会捕获此更改。为避免这种情况，请确保您的$routeProvider 将reloadOnSearch 标志设置为false，因为默认情况下它是true。

例如：

$routeProvider.when("/path/to/my/route",{
   controller: 'MyController',
   templateUrl: '/path/to/template.html',
   //Secret Sauce
   reloadOnSearch: false//Make sure this is explicitly set to false
});

【讨论】：

【解决方案9】：

window.history.replaceState(null, null, window.location.pathname);

【讨论】：