当前位置:首页 > JavaScript

js实现自动跳转

2026-03-01 05:21:57JavaScript

使用 setTimeoutwindow.location 实现自动跳转

通过 setTimeout 设置延迟时间,配合 window.location.hrefwindow.location.replace 实现页面跳转。replace 方法不会保留当前页面的历史记录。

// 延迟 3 秒后跳转到指定 URL
setTimeout(function() {
  window.location.href = "https://example.com";
}, 3000);

使用 meta 标签实现自动跳转

在 HTML 的 <head> 中添加 meta 标签,通过 http-equiv="refresh" 设置跳转时间和目标 URL。

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

使用事件监听触发跳转

通过监听事件(如按钮点击、页面加载完成)触发跳转逻辑,适合需要条件判断的场景。

document.addEventListener('DOMContentLoaded', function() {
  // 页面加载完成后 2 秒跳转
  setTimeout(() => {
    window.location.replace("https://example.com");
  }, 2000);
});

使用 window.location.assign 实现跳转

assign 方法会保留当前页面的历史记录,用户可通过浏览器返回按钮回到原页面。

js实现自动跳转

// 直接跳转,无延迟
window.location.assign("https://example.com");

注意事项

  • 跳转时间单位为毫秒(setTimeout)或秒(meta 标签的 content)。
  • 使用 replaceassign 根据是否需要保留历史记录决定。
  • 确保目标 URL 正确,避免因拼写错误导致跳转失败。

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

相关文章

js实现

js实现

JavaScript 实现方法 JavaScript 是一种广泛使用的编程语言,适用于网页开发、服务器端编程以及移动应用开发。以下是几种常见的 JavaScript 实现方法: 网页交互功能 使用…

js实现倒计时

js实现倒计时

实现倒计时的基本方法 使用 JavaScript 实现倒计时功能可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是几种常见的实现方式: 使用 setInterva…

vue实现路由跳转

vue实现路由跳转

Vue 路由跳转的实现方式 在 Vue 中,路由跳转可以通过 vue-router 实现,以下是几种常见的方法: 声明式导航(模板中使用 <router-link>) 通过 <ro…

js 实现分页

js 实现分页

实现分页的基本逻辑 分页功能通常需要后端返回数据总量或总页数,前端根据当前页码和每页条数截取对应数据。以下是一个基于JavaScript的简单分页实现方案: 前端分页实现 假设已有从后端获取的完整数…

js实现抽奖

js实现抽奖

实现抽奖功能的基本思路 抽奖功能的核心是随机选择奖项并展示结果。可以通过数组存储奖项,利用随机数生成索引,最后通过动画增强用户体验。 准备奖项数据 定义一个数组存储奖项信息,每个奖项可以包含名称、图…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <…