跟随链接时如何保留 URL 查询参数？答案

【问题标题】：How to keep URL query parameters when following a link?跟随链接时如何保留 URL 查询参数？
【发布时间】：2013-03-12 19:47:45
【问题描述】：

这是login.html的代码：

<ul>
  <li class="introduction">
    <a href="introduction.html">
      <span class="icon"></span>
      Introduction
    </a>
  </li>
  <li class="login active">
    <a href="#">
      <span class="login"></span>
      Login
    </a>
  </li>
</ul>

一个外部链接将首先进入当前页面（登录），其中包含一些我想保留的查询参数。如果用户点击第一个链接introduction，就会加载introduction.html。但是，上一页（登录）的所有查询参数都丢失了。

无论如何我可以在保留查询参数的同时加载此页面吗？使用 HTML 或 Javascript。

非常感谢。

【问题讨论】：

修改链接 URL 以包含参数是一个选项
查询参数？您的意思是您使用该页面解析的 GET 值？
如果有的话，你用的是什么框架？

标签： javascript html

【解决方案1】：

您感兴趣的网址部分称为search。

您可以使用相同的参数链接到另一个页面

<a onclick="window.location='someotherpage'+window.location.search;">Login</a>

【讨论】：

【解决方案2】：

通过<a> 标签上的rel="" 属性自动将您当前的参数附加到您认为值得的任何链接（使用jQuery）：

<a href="introduction.html" rel="keep-params">Link</a>

// all <a> tags containing a certain rel=""
$("a[rel~='keep-params']").click(function(e) {
    e.preventDefault();

    var params = window.location.search,
        dest = $(this).attr('href') + params;

    // in my experience, a short timeout has helped overcome browser bugs
    window.setTimeout(function() {
        window.location.href = dest;
    }, 100);
});

【讨论】：

设置的超时时间是什么？你遇到过什么BUG？
我遇到了浏览器处理位置更改而没有完成其他函数语句并导致奇怪行为的问题。现在可以追溯到几年前，但我喜欢保留它只是为了安全。这与 Google Analytics 用于外部链接的方法相同。

【解决方案3】：

修改所有a标签客户端以包含查询参数

[...document.querySelectorAll('a')].forEach(e=>{
//add window url params to to the href's params
  const url = new URL(e.href)
  for (let [k,v] of new URLSearchParams(window.location.search).entries()){
    url.searchParams.set(k,v)
  }
  e.href = url.toString();
})

注意：如果您在此脚本运行后以编程方式添加新的a 标签，它不会更新它，因此它不适用于 SPA 示例

【讨论】：