当前位置:首页 > JavaScript

实现js页面跳转

2026-01-15 14:44:46JavaScript

使用 window.location.href

通过修改 window.location.href 属性实现跳转,这是最常用的方法:

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

使用 window.location.replace

href 类似,但不会在浏览器历史记录中留下当前页面的记录:

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

使用 window.open

在新窗口或标签页中打开页面:

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

使用 location.assign

href 类似,但可以捕获可能的错误:

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

使用 meta 标签自动跳转

在 HTML 中添加 meta 标签实现自动跳转:

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

使用表单提交跳转

通过 JavaScript 提交表单实现跳转:

document.getElementById("myForm").submit();

使用锚点链接跳转

通过修改 location.hash 实现页面内跳转:

window.location.hash = "#section2";

使用 history.pushState

在不刷新页面的情况下修改 URL:

history.pushState({}, "", "newpage.html");

使用框架跳转

在 iframe 中跳转:

document.getElementById("myFrame").src = "newpage.html";

使用导航按钮跳转

模拟浏览器前进后退按钮:

实现js页面跳转

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

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

相关文章

css制作滑动页面

css制作滑动页面

使用CSS实现滑动页面 通过CSS可以实现多种滑动页面效果,包括横向滑动、纵向滑动以及视差滚动等。以下是几种常见的实现方法: 横向滑动效果 横向滑动通常用于展示一组卡片或图片,可以通过CSS的ove…

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 实现页面跳转,这是最常用的方法。 window.location.href = 'https://…

react如何清除页面

react如何清除页面

清除页面内容的方法 在React中清除页面内容通常涉及重置组件状态或移除特定元素。以下是几种常见方法: 重置组件状态 通过将组件的状态重置为初始值来清除页面内容: const MyComponen…

vue实现页面tab

vue实现页面tab

Vue 实现页面 Tab 的方法 使用动态组件 <component :is> 通过 Vue 的动态组件功能,结合 v-for 和 v-if 可以快速实现 Tab 切换效果。 <t…

vue实现页面显示

vue实现页面显示

Vue 实现页面显示的基本方法 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。以下是实现页面显示的核心方法: 创建 Vue 实例 通过 new Vue() 创建一个 Vu…

vue实现打印页面

vue实现打印页面

Vue 实现打印页面的方法 在 Vue 项目中实现打印功能可以通过多种方式完成,以下是几种常见的实现方法: 使用 window.print() 方法 通过调用浏览器的原生打印 API window.…