最稳妥的页面跳转方式是使用 window.location.href，它触发完整页面生命周期；若需无刷新切换则用 fetch + history.pushState 实现前端路由；服务端重定向（301/302）语义正确且 SEO 友好；iframe 隔离性强、SEO 差，应慎用。
用 window.location.href 跳转到另一个 HTML 页面
最直接的方式就是改浏览器地址栏——不是“转换”，而是导航过去。这本质是页面卸载 + 新页面加载，不是把当前 HTML 内容“变成”另一个页面。
常见错误现象：document.write() 覆盖整个页面、innerHTML 替换 body 但脚本不执行、CSS/JS 路径失效——这些都不是真正的“转换”，只是 DOM 替换，状态和资源加载逻辑全乱了。
-
window.location.href = "page2.html"：最稳妥，触发完整页面生命周期（beforeunload、新页面load） - 路径必须写对：
"./pages/detail.html"和"pages/detail.html"在不同 base 下行为不同 - 如果目标页依赖 URL 参数（如
?id=123），记得拼上：window.location.href = "view.html?id=" + id
用 fetch + history.pushState 实现无刷新“切换”
所谓“转换成另一个页面”，用户真正想要的常是：URL 变、内容变、返回按钮可用，但不闪屏。这其实是前端路由的核心场景，不是 HTML 转换，而是动态加载 + 地址同步。
容易踩的坑：fetch("page2.html") 拿到的是完整 HTML 字符串，直接 innerHTML 进去，里面的 默认不执行， 也不会自动加载。
立即学习“前端免费学习笔记（深入）”；
- 只提取关键部分：用
DOMParser解析响应文本，取document.querySelector("main").innerHTML替换当前容器 - 手动补 JS：遍历新 HTML 中的
script标签，用eval()或创建新插入（注意执行顺序和作用域） - 必须调用
history.pushState({page: "detail"}, "", "detail.html")，否则 URL 不变，前进/后退失效 - 还要监听
popstate事件，处理浏览器返回按钮
服务端重定向比前端跳转更可靠
如果你控制后端，别在前端折腾“转换”。HTTP 302 或 301 响应头才是语义正确、SEO 友好、兼容性无敌的做法。
插件描述：jquery实现鼠标左右移动动画特效是一款非常实用的作品，专门为产品下载宣传页面而生，如果公司缺乏前端和美工设置的话，直接就可以拿这个作品用，把相应的素材换成自己的就好，页面简洁大气，效果很炫。。。
使用场景：表单提交后跳转结果页、登录成功跳回原页面、旧 URL 迁移——这些都不该由 JS 承担。
- Node.js（Express）：
res.redirect(302, "/dashboard") - PHP：
header("Location: /profile.php"); exit; - Nginx 配置：
rewrite ^/old$ /new permanent;（301）或return 302 /new; - 注意：302 是临时跳转，301 是永久跳转，搜索引擎会缓存 301，改错难撤回
iframe 加载另一个 HTML 页面？慎用
用 确实能“显示另一个页面”，但它和父页面完全隔离：无法共享 JS 上下文、样式不继承、高度自适应困难、移动端手势可能异常。
典型错误：以为 iframe.contentDocument 能随便操作，结果跨域报 Blocked a frame from accessing a cross-origin frame。
- 同域前提下才能操作 iframe 内容：
iframe.contentWindow.document.body.innerHTML = "..."; - 高度自适应需监听子页面
resize或用postMessage通信 - SEO 几乎为零，爬虫不解析 iframe 内容
- 现代项目中，它基本被单页应用（SPA）或服务端渲染（SSR）替代
真正需要“转换”的时候，先想清楚：是要用户看到新地址？要保留历史记录？是否允许右键“在新标签打开”？这些决定了该用跳转、路由还是重定向——而不是纠结怎么把一个 HTML 字符串“塞进”当前页面。
