当前位置:首页 > JavaScript

js实现跳转

2026-02-16 22:55:01JavaScript

使用 window.location.href 跳转

通过修改 window.location.href 实现页面跳转,适用于普通 URL 跳转:

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

使用 window.location.replace 跳转

替换当前页面,不保留历史记录(无法通过浏览器后退返回):

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

使用 window.open 打开新窗口

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

js实现跳转

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

使用 location.assign 跳转

href 类似,但语义更明确:

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

使用锚点跳转(Hash)

通过修改 URL 的 hash 实现页面内跳转:

js实现跳转

window.location.hash = "#section-id";

使用 history.pushStatereplaceState

修改浏览器历史记录,适用于单页应用(SPA):

history.pushState({}, "", "/new-path");

表单提交跳转

通过动态创建表单实现 POST 跳转:

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

注意事项

  • 跨域限制:某些跳转方式可能受浏览器同源策略限制。
  • 用户体验:replacepushState 不会添加历史记录,需根据场景选择。
  • SEO:单页应用的跳转需配合服务器配置确保爬虫可抓取。

标签: 跳转js
分享给朋友:

相关文章

js实现轮播

js实现轮播

实现基础轮播效果 使用HTML结构创建轮播容器和图片元素: <div class="carousel"> <div class="carousel-inner">…

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

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

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

react 如何跳转

react 如何跳转

使用 React Router 进行页面跳转 React 应用中通常使用 react-router-dom 库实现页面跳转。以下是几种常见的跳转方式: 安装依赖 npm install react…

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

jquery页面跳转

jquery页面跳转

jQuery 页面跳转方法 使用 jQuery 实现页面跳转可以通过多种方式完成,以下是几种常见的方法: 使用 window.location.href 通过修改 window.location.h…

vue实现跳转高亮

vue实现跳转高亮

Vue实现路由跳转高亮 在Vue项目中实现导航菜单跳转高亮效果,通常结合vue-router的active-class特性。以下是几种常见实现方式: 使用router-link的active-cla…