当前位置:首页 > JavaScript

js实现自动跳转

2026-03-01 05:21:57JavaScript

使用 setTimeoutwindow.location 实现自动跳转

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

js实现自动跳转

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

使用 meta 标签实现自动跳转

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

js实现自动跳转

<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 方法会保留当前页面的历史记录,用户可通过浏览器返回按钮回到原页面。

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

注意事项

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

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

相关文章

css3结合js制作

css3结合js制作

CSS3 结合 JavaScript 制作动态效果 CSS3 和 JavaScript 结合可以实现丰富的动态效果,包括动画、交互和响应式设计。以下是几种常见的实现方式: CSS3 动画与 Java…

js实现验证

js实现验证

验证表单输入 使用JavaScript验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…

js 实现链表

js 实现链表

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和指向下一个节点的指针。与数组不同,链表在内存中是非连续存储的,插入和删除操作效率较高。 链表的实现 在 JavaScrip…

jquery js

jquery js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够更高…

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…

js树实现

js树实现

树的基本概念 树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。 树的实现方式 在JavaScript中,树可以通过…