37

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

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

他们没有改变。

4

9 回答 9

49

正如其他人所说，您可以在现代浏览器（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]);
}
于 2015-01-21T22:04:19.993 回答
20

这在使用history api的现代浏览器中是可以实现的，但可能不是解决您的问题的最佳方法。

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

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

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

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

于 2012-05-22T11:19:28.187 回答
9

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

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

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

于 2012-05-22T11:17:38.780 回答
5

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

于 2020-06-30T04:49:00.690 回答
3

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

相同的语法pushState。但是，您必须找到一种方法让 IE 理解这一点。

更好的方法是使用 Apachemod_rewrite模块。它很容易使用。

于 2012-05-22T11:19:47.183 回答
2

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

var newURL = location.href.split("?")[0];
window.history.pushState('object', document.title, newURL);
于 2017-07-10T13:10:17.620 回答
2

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

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

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

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

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

有关使用 and 的详细说明history.pushState，history.replaceState您可以阅读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
});
于 2018-04-24T18:08:13.157 回答
0

更新代码现在它可以工作了

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

// 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 ​</p>

于 2012-05-22T11:47:41.957 回答
-2

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

于 2012-05-22T11:20:24.240 回答