如何在点击链接后保留URL查询参数？

Question

这是 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。

非常感谢。

- user2064791

---

将链接URL修改以包含参数是一种选择。 - John Dvorak

查询参数？你是指正在解析该页面的GET值吗？ - user1467267

Answer 1

你感兴趣的URL部分被称为search。

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

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

- Denys Séguret

Answer 2

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

<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);
});

- Matt Stone

---

什么是设置超时？你遇到了哪些错误？ - awbergs

我曾经遇到过一些问题，即浏览器在处理位置更改时会跳过其他函数语句的执行，导致行为异常。虽然这已经是几年前的事情了，但我喜欢保持警惕。这也是Google Analytics用于外部链接的相同方法。 - Matt Stone

Answer 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）中将无法工作。

- Meir

---

这应该是被接受的答案，因为它 a）不会弄乱已经具有查询参数的URL， b）不需要修改每个<a>标签。 - bomberjackets