如何从一个html到另一个

心靈之曲

发布时间：2026-02-11 15:51:09

383人浏览过

来源于php中文网

原创

最直接兼容的方式是直接赋值 window.location.href，它会立即导航并更新地址栏和历史记录；注意路径正确性及避免 file:// 协议下被拦截。

如何从一个html到另一个

怎么用 `window.location.href` 跳转到另一个 HTML 页面

最直接、兼容性最好的方式就是赋值给 window.location.href。它会立即触发完整页面导航，浏览器地址栏更新，历史记录新增一条。

常见错误现象：window.location.href = "page2.html" 写了但没反应——多半是路径错了，或者当前页面是 file:// 协议（本地双击打开），被浏览器跨域策略拦截，控制台报 Not allowed to load local resource。

路径必须相对或绝对：比如同目录下写 "page2.html"，子目录写 "pages/page2.html"，根目录写 "/pages/page2.html"
不要加 javascript:void(0) 或其他前缀，那会失效
如果页面在服务器上运行（如 http://localhost:3000），这个方法 100% 可用；本地 file:// 就得换方案

为什么 `location.replace()` 有时更合适

它和 href 赋值效果一样，都是跳转，但关键区别是：不会把当前页留在浏览器历史栈里。用户点返回按钮，不会回到刚离开的页面。

适用场景：登录成功后跳首页、表单提交后跳结果页、避免用户反复回退重复提交。

立即学习“前端免费学习笔记（深入）”；

jQuery创建模态窗口登陆效果

何利用jQuery插件leanModal建立一个常规模态窗口。如果你有MIT general license，那么这个插件是完全开源和免费的，我很喜欢这个插件，用起来相当方便，还能自行添加CSS，达到自定义的效果。

下载

写法：window.location.replace("success.html")
和 href 不同，它不支持 target，也不能新开标签页
注意：如果跳转目标出错（如 404），用户无法按返回回到原页面，调试时容易卡住

用标签跳转却打不开？检查这三处

看似最简单，其实最容易栽在细节上。点击没反应，不是 JS 问题，大概率是链接本身有问题。

href 值为空、只有 "#"、或拼写错误（比如 "page2.htm" 实际文件是 page2.html）
路径大小写敏感：Linux 服务器上 "Page2.html" ≠ "page2.html"，本地 Windows 可能不报错，一上线就 404
用了相对路径但 HTML 文件不在预期位置：比如从 /admin/index.html 链接到 "../user/profile.html"，结构稍一变就断链

想局部刷新又不重载整个页面？别硬跳 HTML

如果目标只是“换内容”，而不是真正切换页面（比如 SPA 场景），强行跳 HTML 是反模式。这时候该考虑 fetch() + DOM 替换，或框架路由。

典型错误：用 location.href 跳一个只含

 的 HTML，结果样式丢失、脚本不执行、状态全丢。

静态 HTML 片段建议用 fetch("content.html").then(r => r.text()).then(html => el.innerHTML = html)

需要 JS 初始化？得手动调用，HTML 里的  不会自动执行
真要路由级切换，优先选 history.pushState() 配合事件监听，而不是伪造跳转

路径、协议、历史栈行为——这三个地方错一个，跳转就不可靠。尤其本地开发时一切正常，部署后突然失效，八成是路径或协议惹的祸。