当前位置:首页 > JavaScript

js实现换页

2026-04-06 20:50:50JavaScript

使用 window.location 实现页面跳转

通过修改 window.location.hrefwindow.location.assign() 实现换页:

// 方法1:直接修改 href
window.location.href = 'https://example.com/newpage.html';

// 方法2:使用 assign() 方法(可回退到上一页)
window.location.assign('https://example.com/newpage.html');

使用 window.open 打开新窗口或标签页

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

js实现换页

window.open('https://example.com/newpage.html', '_blank'); // 新标签页
window.open('https://example.com/newpage.html', '_self');  // 当前窗口

使用 history.pushState 无刷新修改 URL

适用于单页应用(SPA),仅更新 URL 不刷新页面:

js实现换页

history.pushState({}, '', '/newpage.html'); // 修改 URL 但不加载新页面

表单提交跳转

通过表单提交实现页面跳转:

document.getElementById('myForm').submit(); // 提交表单后跳转

使用 <a> 标签模拟点击

通过 JavaScript 触发 <a> 标签的点击事件:

document.getElementById('myLink').click(); // 模拟点击链接跳转

注意事项

  • 使用 window.locationwindow.open 时,跨域链接可能受浏览器安全策略限制。
  • history.pushState 需配合前端路由框架(如 React Router、Vue Router)使用。
  • 表单跳转适用于需要提交数据的场景。

标签: 换页js
分享给朋友:

相关文章

js实现分页

js实现分页

实现分页的基本思路 分页功能通常需要处理数据分割、页码生成和用户交互。核心逻辑包括计算总页数、根据当前页截取数据、渲染页码按钮等。 前端分页实现(静态数据) 假设已有全部数据,仅需前端分页展示:…

js实现vue

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.j…

js实现论坛

js实现论坛

实现论坛的基本功能 使用JavaScript实现一个论坛需要结合前端和后端技术。前端可以使用React、Vue或Angular等框架,后端可以选择Node.js配合Express或Koa框架。数据库可…

js实现tab选项卡切换

js实现tab选项卡切换

实现Tab选项卡切换的JavaScript方法 使用纯JavaScript实现Tab切换功能,可以通过监听点击事件动态切换内容显示状态。以下是两种常见实现方式: 基础DOM操作实现 /…

js实现二叉树

js实现二叉树

二叉树的基本概念 二叉树是一种树形数据结构,每个节点最多有两个子节点,分别称为左子节点和右子节点。二叉树的常见操作包括插入、删除、遍历等。 二叉树的节点定义 在JavaScript中,二叉树的节点可…

js实现变形

js实现变形

使用 CSS 和 JavaScript 实现元素变形 在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性,通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。 基…