本文将介绍如何使用 JavaScript 从 URL 中提取指定参数，并动态地将其添加到页面上的链接。此方法适用于静态网站，无需服务器端脚本支持，可以方便地实现语言切换等功能，例如实现语言选择后返回到之前的页面。
获取 URL 参数
首先，我们需要使用 JavaScript 获取 URL 中的参数。URLSearchParams 对象提供了一种方便的方式来解析 URL 查询字符串。以下代码展示了如何获取名为 target 的参数：
function getUrlParameter(parameterName) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(parameterName);
}
// 示例：获取 target 参数的值
const targetPage = getUrlParameter('target');
if (targetPage) {
console.log("Target page:", targetPage);
} else {
console.log("Target parameter not found.");
}这段代码定义了一个 getUrlParameter 函数，它接受参数名作为输入，并返回该参数对应的值。window.location.search 包含了 URL 中问号（?）后面的查询字符串。URLSearchParams 对象将查询字符串解析成键值对，方便我们通过 get() 方法获取指定参数的值。
更新链接
接下来，我们需要找到页面上的链接，并将获取到的参数添加到这些链接的 href 属性中。假设我们有一个包含语言链接的列表：
立即学习“Java免费学习笔记（深入）”；
我们可以使用 JavaScript 找到这些链接，并更新它们的 href 属性：
function updateLinks(targetPage) {
const links = document.querySelectorAll('.locale-list a');
links.forEach(link => {
const originalHref = link.getAttribute('href');
link.setAttribute('href', originalHref + targetPage);
});
}
// 示例：更新链接
const targetPage = getUrlParameter('target');
if (targetPage) {
updateLinks(targetPage);
}这段代码首先使用 document.querySelectorAll() 方法选择所有带有 .locale-list 类名的 ul 元素下的 a 标签（即链接）。然后，它遍历每个链接，获取其原始的 href 属性，并将 targetPage 参数添加到 href 属性的末尾。最后，使用 setAttribute() 方法更新链接的 href 属性。
完整代码示例
将以上代码整合起来，得到完整的 JavaScript 代码：
function getUrlParameter(parameterName) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(parameterName);
}
function updateLinks(targetPage) {
const links = document.querySelectorAll('.locale-list a');
links.forEach(link => {
const originalHref = link.getAttribute('href');
link.setAttribute('href', originalHref + targetPage);
});
}
window.addEventListener('load', function() {
const targetPage = getUrlParameter('target');
if (targetPage) {
updateLinks(targetPage);
}
});这段代码使用了 window.addEventListener('load', ...)，确保在页面加载完成后再执行 JavaScript 代码，避免因 DOM 元素尚未加载而导致的问题。
注意事项
- URL 编码： 如果 target 参数包含特殊字符，例如空格或斜杠，需要进行 URL 编码，以确保 URL 的正确性。可以使用 encodeURIComponent() 函数进行编码。
- 安全性： 请注意，从 URL 获取的参数可能包含恶意代码。在将参数添加到链接之前，应该进行适当的验证和过滤，以防止跨站脚本攻击 (XSS)。
- 兼容性： 确保代码在目标浏览器上具有良好的兼容性。URLSearchParams 对象在较旧的浏览器上可能不受支持，需要使用 polyfill 来提供兼容性。
总结
通过使用 JavaScript 的 URLSearchParams 对象和 DOM 操作，我们可以方便地从 URL 中提取参数，并动态地更新页面上的链接。这种方法适用于静态网站，可以实现各种功能，例如语言切换、页面重定向等。在实际应用中，需要注意 URL 编码、安全性和兼容性等问题，以确保代码的正确性和可靠性。
