编辑

Question

我有一个包含两个页面的网站，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，当用户单击内部链接时，该Javascript会在用户访问网站的整个过程中传递URL参数。如果是外部链接，则不得包含这些参数。如何才能最有效地实现这一目标？

非常感谢所有帮助。

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

编辑

这是使上述内容仅适用于内部链接的方法（我将内部链接归类为以/或.（相对链接）开头的链接，或以http开头并包含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;
                }
            });

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

如何使用JavaScript在网站的所有页面/内部链接中传递URL参数？

2 个答案:

编辑