0

0

如何从一个html页面跳转到另外一个

聖光之護

聖光之護

发布时间:2026-02-14 18:14:30

|

750人浏览过

|

来源于php中文网

原创

最稳妥的页面跳转方式是赋值给window.location.href,它立即导航且兼容性好;需避免语义不清的window.location=或不存在的url/set写法;需无痕跳转时用replace()而非assign();spa中应优先使用框架路由如router.push()而非原生api。

如何从一个html页面跳转到另外一个

window.location.href 跳转最直接

浏览器里跳页面,本质就是改当前标签页的 URL。最常用、最稳妥的方式就是赋值给 window.location.href,它会立即触发导航,且兼容所有现代浏览器和 IE9+。

常见错误是写成 window.location = 'xxx.html' —— 虽然多数时候也生效,但语义不明确,有些老环境行为不稳定;更糟的是误写为 window.location.urlwindow.location.set('xxx'),这些根本不存在,会报 TypeError

  • window.location.href = 'https://example.com':支持绝对 URL 和相对路径(如 './page2.html''../admin/index.html'
  • 跳转前可加判断:if (userHasPermission) { window.location.href = '/dashboard'; }
  • 注意:该方式会把当前页加入浏览历史,用户点「返回」能回到原页

想替换当前历史记录用 window.location.replace()

当不想让用户通过「返回」回到上一页时(比如登录成功后跳首页、表单提交后防重复提交),必须用 replace()。它不会新增历史条目,而是直接把当前记录替换成新 URL。

容易踩的坑是混淆 replace()assign()assign() 等价于 href 赋值,而 replace() 才是真·无痕跳转。另外,replace() 不支持跨域跳转(同源策略限制),否则静默失败,控制台可能没报错但页面不动。

快剪魔方
快剪魔方

AI漫剧高效制作工具

下载

立即学习前端免费学习笔记(深入)”;

  • window.location.replace('./success.html'):页面跳走,历史栈不变
  • 不能用于打开新窗口或标签页 —— 那得用 window.open()
  • 如果跳转目标是外部域名,需确保协议一致(httphttp),否则部分浏览器会拦截

<a href></a>

  • 新标签页:<a href="xxx"></a>onclick="window.location.href='...'" 防安全风险)
  • 避免内联 JS 跳转,除非需要动态生成 URL 或做权限校验
  • Vue/React 项目里别直接操作 href

    在单页应用(SPA)中,直接用 return false 会强制刷新整个页面,绕过路由系统,丢失当前组件状态、Vuex/Pinia 数据、React state,相当于退化成多页应用(MPA)。

    典型错误是在 Vue 组件里写 event.preventDefault(),而不是调用 <a href="about.html">关于我们</a>;或者在 React 中忽略 <a href="blog.html" target="_blank" rel="noopener">博客</a>,硬切 URL。

    • Vue 3 + Vue Router 4:rel="noopener"
    • React Router v6:window.location
    • 只有真正需要全量刷新(比如登出后跳登录页、版本升级强制 reload)才用 window.location.href
    跳转看着简单,但混用原生 API 和框架路由、忽略历史栈语义、跨域或协议不一致,都会让行为变得不可预测。尤其在 SPA 里,一个 onClick={() => { window.location.href = '/user' }} 调用可能悄悄毁掉整个用户体验。

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    if什么意思
    if什么意思

    if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

    810

    2023.08.22

    c语言const用法
    c语言const用法

    const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

    544

    2023.09.20

    堆和栈的区别
    堆和栈的区别

    堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

    416

    2023.07.18

    堆和栈区别
    堆和栈区别

    堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

    588

    2023.08.10

    js正则表达式
    js正则表达式

    php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

    521

    2023.06.20

    js获取当前时间
    js获取当前时间

    JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

    371

    2023.07.28

    js 字符串转数组
    js 字符串转数组

    js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

    531

    2023.08.03

    js是什么意思
    js是什么意思

    JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

    5600

    2023.08.17

    pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
    pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

    本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

    23

    2026.02.13

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 3.3万人学习

    AngularJS教程
    AngularJS教程

    共24课时 | 3.6万人学习

    CSS教程
    CSS教程

    共754课时 | 31.6万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号