【问题标题】：How to pass URL parameters across all pages/internal links in a site with javascript?如何使用 javascript 在站点中的所有页面/内部链接之间传递 URL 参数？
【发布时间】：2019-08-20 04:46:14
【问题描述】：

我的网站有两个页面，index.html 和 page2.html：

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Homepage</title>    
    <style type="text/css">
      #holder {margin: 20px auto; max-width: 900px;}      
    </style>
  </head>
  <body>
    <div id="holder">
      <h1>Home</h1>
      <ul id="menu">
        <li><a href="/page2.html">Internal Link</a></li>
        <li><a href="https://www.apple.com/" target="_blank">App Store</a> 
   </li>
      </ul>
      <h2 id="useApp">Is the user using our app?</h2>
    </div>
  </body>
</html>

page2.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page 2</title>    
    <style type="text/css">
      #holder {margin: 20px auto; max-width: 900px;}      
    </style>
  </head>
  <body>
    <div id="holder">
      <h1>Internal Page</h1>
      <ul id="menu">
        <li><a href="/index.html">Homepage</a></li>
        <li><a href="https://www.apple.com/" target="_blank">App Store</a> 
       </li>
      </ul>
      <h2 id="useApp">Is the user using our app?</h2>
    </div>
  </body>
</html>

当用户通过点击 Google 广告登陆 index.html 时，为了启用跟踪广告，将以下参数附加到 URL 的末尾：

?utm_source=google&utm_medium=search&utm_campaign=summer19

出现的一个问题是，当用户导航到站点内的另一个页面时，这些 URL 参数会丢失。我想编写一些 Javascript，当用户点击内部链接时，它们会在用户在网站上的旅程中传递 URL 参数。在外部链接的情况下，它不能包含这些参数。我怎样才能最有效地实现这一点？

非常感谢所有帮助。

【问题讨论】：

这里的问题是什么是内部链接？如果您 100% 确定内部链接将始终采用相对形式（即 /index.html 而不是 http://www.example.com/index.html），那么您可以检查起始字符。但是你需要做出这样的假设。
也许您可以将参数存储在sessionStorage 中并在需要时访问它，而不是将参数附加到每个链接。

标签： javascript html css url

【解决方案1】：

使用querySelectorAll 查找所有具有href 属性的元素，并附加来自URL(window.location).search 的搜索字符串：

var queryString = new URL(window.location).search;
document.querySelectorAll("[href]").forEach(link => {
    var current = link.href;
    link.href = current + queryString;
});

编辑

以下是如何使上述内容仅适用于内部链接（我将内部链接归类为以/ 或.（相对链接）开头的链接，或以@ 开头的链接987654327@ 并包括window.location.hostname（绝对链接）：

var queryString = new URL(window.location).search;
document.querySelectorAll("[href]").forEach(link => {
            if (link.href.startsWith("/") || link.href.startsWith(".") || (link.href.startsWith("http") && link.href.include(window.location.hostname)) {
                    var current = link.href;
                    link.href = current + queryString;
                }
            });

【讨论】：

我觉得这并没有区分内部链接和外部链接，还是我遗漏了什么？
@JackBashford 您能否提供一个仅针对内部链接执行此操作的代码示例？
@ChatterOne 我已经修好了。
@EricR。编辑了我的答案，现在对你有用吗？
这也会弄乱已经有查询字符串的链接。

【解决方案2】：

这里是检查内部或外部链接的方法：

var isExternal = function(url) {
    return !(location.href.replace("http://", "").replace("https://", "").split("/")[0] === url.replace("http://", "").replace("https://", "").split("/")[0]);   
}

这样我们就可以从URL中获取参数字符串了：

var params = new URL(window.location).search;

最后循环遍历所有页面链接并过滤内部链接。然后将参数字符串附加到每个内部链接：

document.querySelectorAll("[href]").forEach(li => {
    var current = li.href;
    if(isExternal(current)){
        li.href = current + params;
    }    
});

【讨论】：