原生html无法直接获取url参数，需用javascript的urlsearchparams解析window.location.search；取值后须通过textcontent等安全方式写入dom，避免xss；脚本需在dom加载完成后执行，并在spa中手动监听url变化更新内容。
URL参数怎么取到并用在HTML里
浏览器地址栏里的 ?id=123&lang=zh 这类参数，原生 HTML 拿不到——必须靠 JavaScript 解析后写入。别指望 <meta> 或 data- 属性自动绑定，得手动读、手动插。
推荐用 URLSearchParams，兼容性够用（Chrome 49+、Firefox 44+、Safari 10.1+），比正则或 split('?')[1] 更稳：
const params = new URLSearchParams(window.location.search);
const id = params.get('id'); // 返回 '123'（字符串）
const lang = params.get('lang') || 'en';
注意：get() 总返回字符串，数字要 parseInt()；get() 找不到键时返回 null，不是 undefined，所以用 || 默认值前最好先 ?? 或显式判断。
怎么把JS拿到的值安全塞进页面元素
直接拼接字符串插入 innerHTML 是高危操作，XSS 风险拉满。只要参数来自 URL，就必须当外部输入处理。
- 纯文本内容：用
textContent替代innerHTML，自动转义 - 需要渲染 HTML 片段（比如富文本）：先用
DOMPurify.sanitize()过滤，别手写白名单 - 填表单值或属性：用
value、dataset、setAttribute()等原生 API，不走 HTML 字符串
示例——把 id 显示在标题里：
const titleEl = document.getElementById('page-title');
if (titleEl && id) {
titleEl.textContent = `详情页 #${id}`; // 安全
}
页面加载时机不对导致取不到参数
常见错误：脚本放在 里，没加 defer 或 DOMContentLoaded，结果 document.getElementById() 找不到元素，或者 window.location.search 还没 ready。
稳妥做法只有一条：等 DOM 加载完再执行逻辑。
- 脚本放
前（最简单） - 或加
defer属性：<script defer src="app.js"></script> - 或包装进事件：
document.addEventListener('DOMContentLoaded', () => { ... })
别用 window.onload——它等图片、样式表全加载完，太晚。
路由跳转后参数变了，页面不自动更新
单页应用（SPA）场景下，用 history.pushState() 或 router.push() 切换 URL 时，window.location.search 虽然变了，但不会触发页面刷新，JS 不会重跑——你得自己监听变化。
监听方式只有 popstate 事件，但它只响应浏览器前进/后退，不响应 pushState 自身：
window.addEventListener('popstate', () => {
const params = new URLSearchParams(window.location.search);
updateContent(params); // 你自己的更新函数
});
// 对于 pushState，调用后手动触发一次 updateContent()
history.pushState({}, '', '?id=456');
updateContent(new URLSearchParams(window.location.search));
真正麻烦的是：如果项目用了 Vue Router、React Router，就别自己搞 URLSearchParams 了——直接用框架的 useRoute() 或 useSearchParams()，它们内置了响应式更新和历史栈同步。
纯静态 HTML 场景下，这个细节最容易被忽略：URL 变了 ≠ 内容自动变，JS 必须主动响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
