如何在跟踪链接时保留URL查询参数

How to keep URL query parameters when following a link?

本文关键字：保留 URL 查询 参数 链接 跟踪      更新时间：2023-09-26

这是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部分称为搜索。

您可以使用

链接到具有相同参数的另一个页面
<a onclick="window.location='someotherpage'+window.location.search;">Login</a>

通过<a>标签(使用jQuery)的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);
});

修改客户端所有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工作，例如
相关文章：