Javascript 抓取 URL 参数并附加到所有页面

Question

我正在使用下面的脚本从我的索引页面中获取 URL 参数，现在我将如何将我获取的内容添加到我的网站上的任何链接/页面，用户接下来会去哪里？

我尝试将附加类添加到页面上已有的 href，但仍然没有任何内容转移到下一页。

<script>
    var qStr = window.location.href.slice(window.location.href.indexOf("?") + 1);
    if (qStr.indexOf("utm") > -1) {
      $(".append").each(function() {
        var $this = $(this);
        var _href = $this.attr("href");
        if (_href.indexOf("?") > -1) {
          $this.attr("href", _href + "&" + qStr);
        } else {
          $this.attr("href", _href + "?" + qStr);
        }
      });
    }
</script>

Answer 1

更简洁的方法是使用URLSearchParams API

// modify location url for demo only
history.pushState(null, null, '?id=10&utm_abc=abcd');

const pageParams = new URLSearchParams(location.search)

if ([...pageParams.keys()].some(k => k.includes('utm'))) {

  // every `<a>` has a search property
  $('a').prop('search', (i, curr) => {
    const linkParams = new URLSearchParams(curr);
    // loop over all the params in page url and append to link params
    pageParams.forEach((v, k) => linkParams.append(k, v));
    return linkParams
  });
  
}

// log updated href for demo
$('a').each((_, el) => console.log(el.href))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://exaample.com?foo=bar&x=ffff">one - has params</a>
<a href="http://exaample.com">two - no params</a>