当前位置:首页 > JavaScript

用js实现页面跳转

2026-01-31 00:51:54JavaScript

使用 window.location.href

通过修改 window.location.href 实现跳转,直接赋值目标 URL 即可:

window.location.href = "https://example.com";

使用 window.location.replace

href 类似,但会替换当前历史记录,无法通过浏览器后退按钮返回:

window.location.replace("https://example.com");

使用 window.open

在新窗口或标签页中打开链接,可通过参数控制打开方式:

用js实现页面跳转

window.open("https://example.com", "_blank");

使用 meta 标签自动跳转

在 HTML 的 <head> 中添加 meta 标签实现自动跳转,适合纯前端场景:

<meta http-equiv="refresh" content="5;url=https://example.com">

使用表单提交跳转

动态创建表单并提交,适合需要传递参数的场景:

用js实现页面跳转

const form = document.createElement('form');
form.method = 'GET';
form.action = 'https://example.com';
document.body.appendChild(form);
form.submit();

使用 History API

通过 history.pushStatehistory.replaceState 修改 URL 而不刷新页面,适合单页应用(SPA):

history.pushState({}, '', '/new-page');

使用导航按钮模拟

触发浏览器的前进/后退功能,适用于 SPA 中的路由控制:

history.back();    // 后退
history.forward(); // 前进

使用锚点跳转

跳转到当前页面的指定锚点位置:

window.location.hash = "#section1";

每种方法适用于不同场景,可根据实际需求选择。对于普通页面跳转,window.location.href 是最常用的方式;单页应用推荐使用 History API;需要传递参数时表单提交更合适。

标签: 跳转页面
分享给朋友:

相关文章

vue实现动态显示页面

vue实现动态显示页面

vue实现动态显示页面 在Vue中实现动态显示页面可以通过多种方式,包括条件渲染、动态组件、路由控制等。以下是几种常见的方法: 条件渲染v-if/v-show 使用v-if或v-show指令可以根据…

vue实现关闭页面

vue实现关闭页面

关闭当前页面的方法 在Vue中关闭当前页面可以通过JavaScript的window.close()方法实现。该方法会关闭当前浏览器窗口或标签页。 methods: { closePage()…

css制作锁屏页面

css制作锁屏页面

使用CSS制作锁屏页面 锁屏页面通常包含一个背景、时间显示以及可能的解锁按钮或输入框。以下是实现锁屏页面的关键CSS代码和结构。 HTML结构 <!DOCTYPE html> <…

h5实现登录页面跳转页面跳转页面

h5实现登录页面跳转页面跳转页面

实现H5登录页面跳转 在H5中实现登录页面跳转可以通过多种方式完成,以下是几种常见方法: 使用window.location.href window.location.href = '目标页面UR…

如何react页面

如何react页面

创建 React 页面 使用 create-react-app 快速初始化项目: npx create-react-app my-app cd my-app npm start 基础页面结构 在 s…

vue 实现页面跳转

vue 实现页面跳转

Vue 实现页面跳转的方法 在 Vue 中实现页面跳转可以通过多种方式,主要包括使用 Vue Router 提供的导航方法和原生 JavaScript 的方式。 使用 Vue Router 的 r…