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

JavaScript抓取URL参数并附加到所有页面是一种常见的前端开发技术，它可以通过解析URL中的查询字符串参数，然后将其附加到所有页面的链接或表单中。这样做的好处是可以在不同页面之间传递参数，实现数据的共享和传递。

具体实现这一功能的方法如下：

使用JavaScript的URLSearchParams对象来解析URL中的查询字符串参数。URLSearchParams是一个内置对象，可以方便地获取和操作URL中的查询参数。
首先，我们需要获取当前页面的URL。可以使用JavaScript的window.location对象的属性来获取当前页面的URL，例如：window.location.href。
接下来，我们可以使用URLSearchParams对象的get()方法来获取指定参数的值。例如，如果我们要获取名为"param1"的参数的值，可以使用URLSearchParams对象的get()方法，如：searchParams.get("param1")。
获取到参数的值后，我们可以将其附加到所有页面的链接或表单中。可以通过遍历页面中的所有链接和表单元素，然后将参数值添加到它们的URL或表单数据中。

下面是一个示例代码，演示了如何使用JavaScript抓取URL参数并附加到所有页面：

// 获取URL参数的值
function getURLParameter(name) {
  const searchParams = new URLSearchParams(window.location.search);
  return searchParams.get(name);
}

// 将参数附加到所有链接和表单中
function appendURLParameterToElements(name, value) {
  const links = document.getElementsByTagName("a");
  const forms = document.getElementsByTagName("form");

  // 遍历所有链接并附加参数
  for (let i = 0; i < links.length; i++) {
    let href = links[i].getAttribute("href");
    if (href.includes("?")) {
      href += `&${name}=${value}`;
    } else {
      href += `?${name}=${value}`;
    }
    links[i].setAttribute("href", href);
  }

  // 遍历所有表单并附加参数
  for (let i = 0; i < forms.length; i++) {
    let action = forms[i].getAttribute("action");
    if (action.includes("?")) {
      action += `&${name}=${value}`;
    } else {
      action += `?${name}=${value}`;
    }
    forms[i].setAttribute("action", action);
  }
}

// 获取参数值并附加到所有页面
const paramValue = getURLParameter("param1");
if (paramValue) {
  appendURLParameterToElements("param1", paramValue);
}

这样，当页面加载时，JavaScript会自动解析URL中的参数，并将其附加到所有页面的链接和表单中。

这种技术在以下场景中非常有用：