原创投稿
  1. 爱玩数码首页
  2. 投稿

html页面跳转怎么实现（网页跳转的写法大全及其用途区别）

爱玩数码编辑 • • 投稿 • 阅读 33

html页面跳转怎么实现（网页跳转的写法大全及其用途区别）

有时候，我们会希望网页自动跳转，应用场景包括：

  • 提交表单后自动转到另外一个页面，
  • 页面地址变了，希望访问老地址时能自动转到新地址，等等。

下面总结下如何在前端页面中控制跳转的方法：

利用html的refresh

<meta http-equiv=”refresh” content=”0;url=index.html”>

其中0表示0秒以后跳转，可以自行设定时间。

利用js的href属性

window.location.href=’index.html’;

如果要设定延迟时间，则加上setTimeout

setTimeout(“javascript:location.href=’index.html'”, 5000);

利用js的navigate方式

window.navigate(“index.html”);

自动刷新页面

在上述方式中，如果跳转的页面就是本页面，那么就是自动刷新页面的功能。

或者使用reload

location.reload()

跳转到上一页，下一页的方式

window.history.go(-1);

其中 -1 表示上一页，如果没有负号的就是表示下一页

如果不是1而是 2,3,4……n 则表示前进或者后退 n 页

后退还可以用

window.history.back();

两者的区别是：

go(-1):返回上一页，原页面表单中的内容会丢失；

back():返回上一页，原页表表单中的内容会保留。

前进则对应的是：

history.forward()：

此外，还有一个参数 history.length 记录了页面前进的序号，如果等于0表示第一页

怎么选择

至此，自动跳转页面、刷新页面、前后切换的方法都齐了！方法多了就有了选择恐惧症？

基本原则：

单纯的页面跳转建议就用html的refresh方法，无需js代码，很简洁。

如果比较复杂，涉及js代码的业务功能，再加上跳转功能的，就用js的各种方法。

此外还要考虑页面是否刷新的问题，希望刷新就用go，否则用back/forward

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至87172970@qq.com举报，一经查实，本站将立刻删除。

赞 (0)
爱玩数码编辑爱玩数码编辑管理员
0 0
« 上一篇 2022年12月26日 15:05:58
下一篇 » 2022年12月26日 15:11:54

相关推荐

发表评论

登录后才能评论