HTML页面无法直接获取URL参数，需用JavaScript通过window.location.search配合URLSearchParams解析；常见错误是误以为参数自动变为变量或滥用document.write；静态托管场景下必须前端解析。
HTML 页面怎么拿到 URL 里的参数
纯 HTML 没有运行时能力，window.location.search 是实际干活的入口，但得靠 JavaScript 解析。浏览器不会自动把 ?id=123&name=test 变成变量供你直接用。
- 常见错误现象：
document.getElementById("x").innerHTML = id报错ReferenceError: id is not defined—— 因为 HTML 里根本没定义id这个变量 - 使用场景：分享链接带参数（如
/detail.html?id=456）、营销落地页识别渠道来源、单页应用简易路由 - 推荐做法：用
URLSearchParams解析，兼容性足够（Chrome 49+/Firefox 44+/Safari 10.1+）；老项目需 polyfill 或手写正则解析 - 简短示例：
const params = new URLSearchParams(window.location.search); const id = params.get('id'); // 返回 '456'（字符串） const name = params.get('name') || 'default';
为什么不能用 document.write 或内联 script 直接写参数
因为 HTML 加载顺序和脚本执行时机不匹配，且 document.write 在 DOM 加载完成后调用会清空整个页面 —— 这是容易被忽略的“静默崩溃”点。
- 常见错误现象：页面闪一下变空白，控制台无报错，但
document.write已执行过一次 - 参数差异：
window.location.search是原始字符串（含?），URLSearchParams自动跳过它；手写正则容易漏掉&编码或空值情况（如?flag&name=） - 性能影响：解析本身开销可忽略，但若在
DOMContentLoaded前就操作 DOM 节点，可能触发重排；建议等DOMContentLoaded后再读取并填充
后端传参和前端取参不是一回事
有人把 PHP 的 $_GET['id'] 或 Node.js 的 req.query.id 和前端混淆了 —— 那些发生在服务端，HTML 文件还没发给浏览器时就处理完了；而你在浏览器里打开的 index.html?id=789，服务端通常根本没参与这个参数传递（除非配置了 URL 重写或代理）。
- 使用场景：静态托管（GitHub Pages / Netlify / Vercel）下，所有参数都只能前端解析；Nginx/Apache 默认也不会把 query string 透传给 HTML 文件内部
- 容易踩的坑：以为加了
<meta http-equiv="refresh" content="0;url=index.html?id=123">就等于“传参成功”，其实只是跳转，参数仍需 JS 主动读取 - 兼容性注意：IE 不支持
URLSearchParams，要用new URL(window.location)（IE 也不支持）或降级到split('?')[1].split('&')手动解析
参数值里有中文或特殊字符怎么办
URL 中的中文默认是 UTF-8 编码后的百分号形式（如 %E4%BD%A0%E5%A5%BD），URLSearchParams.get() 会自动解码，不用额外调用 decodeURIComponent() —— 但自己手写解析时必须加。
立即学习“前端免费学习笔记（深入）”；
- 常见错误现象：显示成
%E4%BD%A0而不是“你”，说明多解了一次或没解 - 参数差异：
params.get('q')对?q=%E4%BD%A0%E5%A5%BD返回"你好"；但对?q=hello%20world返回"hello world"（空格已解） - 安全提醒：不要直接把参数插入 innerHTML，尤其未过滤时可能引发 XSS；优先用
textContent或手动转义
