HTML—js:利用History对象实现页面跳转

最新推荐文章于 2024-04-20 11:50:28 发布
最新推荐文章于 2024-04-20 11:50:28 发布
阅读量5.4k 收藏
点赞数
文章标签： history js javascript 页面跳转 window对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuehyunyu/article/details/73744553
版权

History常用的属性和方法：

length：返回浏览器历史列表中的URL数量

back()：加载history列表中的前一个URL

forward()：加载history列表中的下一个URL

go()：加载history列表中的某个具体页面

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>第一个页面</h1>
    <a href="historyPage2.html">下一个页面</a>
    <input type="button" value="前进" οnclick="next()">
    <input type="button" value="最后一个页面" οnclick="goPage()">
</body>
<script>
    alert(history.length);

    function next(){
        history.forward();
    }
    function goPage(){
        history.go(3);
    }

</script>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>第二个页面</h1>
<a href="historyPage3.html">下一个页面</a>
<input type="button" value="前进" οnclick="next()">
<input type="button" value="后退" οnclick="back()">
</body>
<script>
    alert(history.length);
    function next(){
        history.forward();
    }
    function back(){
        history.back();
    }
</script>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>第三个页面</h1>
<a href="historyPage4.html">下一个页面</a>
<input type="button" value="前进" οnclick="next()">
<input type="button" value="后退" οnclick="back()">
<input type="button" value="返回到首页" οnclick="goPage()">
</body>
<script>
    alert(history.length);
    function next(){
        history.forward();
    }
    function back(){
        history.back();
    }
    function goPage(){
        history.go(-2);
    }
</script>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>第四个页面</h1>
<input type="button" value="后退" οnclick="back()">
</body>
<script>
    alert(history.length);
    function back(){
        history.back();
    }
</script>
</html>



xuehyunyu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js返回一个历史页面
04-16
js返回一个历史页面，非常好用，开发中经常用到
HTML5无刷新实现跳转页面,操纵历史，利用HTML5 History API实现无刷新跳转
weixin_35980011的博客
06-03 950
写在前面有一次在上点点网的时候，发现登陆、注册动画效果非常华丽，但让我感到震惊的是页面竟能够实现无刷新跳转(已改版，观看此效果可以猛击此处：GitHub或阅FM)，回顾了所学的前端知识，似乎没有任何技术可以实现这一点，于是百度搜罗了一下，才发现这原来是使用HTML5中History API实现的效果，但奈何一直未曾派上用场。直到博客改版时，才将这一技术应用起来。HTML4中的History API...
JS实现点击浏览器自带返回按钮跳转到指定页面
程序人生
07-10 9192
JS实现点击浏览器自带返回按钮跳转到指定页面.实例代码一： 实例代码二浏览器返回按钮跳转到指定页面 在使用手机浏览器打开网页时，我们会发现有时候点击浏览器下方的返回按钮，并未返回到首页，而是会跳转到其他页面。 怎么实现呢，下面跟大家简单分享一下： 1、改变浏览器回退的历史记录url地址： 每打开一条地址，浏览器会记录一条历史记录，浏览器回退按钮是读取上一条历史记录的地址并跳转。当只打开一个页面时浏览器返回按钮获取不到上一条历史记录，直接返回首页。（注：这里不考虑部分手机浏览器的无痕浏览设置） 为保证我们..
react-router-domV6版本在js文件使用history跳转
qq_23207707的博客
07-11 2805
非React的上下文环境或全局变量中使用Router
JavaScript history对象（back()、forward()、go()）
weixin_46990454的博客
12-15 4151
history对象保存了当前浏览器窗口中打开页面的一个历史记录列表，使用history对象可以将当前浏览器
JS 页面前进、页面后退、页面跳转的方法
qq_21861771的博客
07-06 649
页面前进，页面后退，本质上也是页面跳转，这都属于在浏览器里进行的操作。
前端js实现路由切换页面 pushState replaceState
秋来九月八
02-16 3944
window.history 我们可以通过window.history的两个方法来控制浏览器的路由改变，但不会让浏览器刷新页面。 pushState 会追加浏览器的路由历史，但不会刷新页面，可以用这种方式来实现前端路由的控制。 history.pushState(state, title[, url]) 可以传递三个参数，state， 需要传递的参数，当监听到浏览器的路由活动历史记录条目更改时，可以获取到这个参数。 title 当前大多数浏览器都忽略此参数，在此处传递空字符串应该可以防止将来对方法的更改。
JS 实现页面跳转的几种方法
雪崩时没有一片雪花是无辜的！
09-20 4万+
JS 实现页面跳转的几种方法 要实现从一个页面A跳到另一个页面B，js实现就在A的js代码加跳转代码 JS跳转大概有以下几种方式： 第一种：(跳转到b.html) <script language="javascript" type="text/javascript"> window.location.href="b.html"; </script> 第二种：(返...
使用 JS 实现页面跳转的几种方式总结，小菜一碟！
热门推荐
Java精选
08-11 7万+
对于大多数前端开发人员，经常用到的就是页面跳转功能吧，下面简单总结了几种页面跳转功能的实现，供大家参考使用。 第一种：使用JS跳转页面 1）跳转带参 <script language="javascript" type="text/javascript"> window.location.href="jingxuan.do?backurl=" + window.location.href; </script> 2）跳转无参 <script>window.
html增加一条历史记录,JS实现不重载页面前提下创建一条历史纪录
weixin_39902085的博客
06-19 587
背景最近在上班过程中，遇到了这么一个需求，在多页面应用中，需要在几个页面上共用同一个数据来源，且切换页面不刷新页面数据，并能实现历史记录的后退功能；因前期只考虑在一个页面内实现多个页面的效果，并未考虑到历史记录堆栈中的处理，导致页面会一次性推出入口，以下为总结的几种解决方法。hash在URL中，#我们称为位置标识符，代表网页的一个位置，在我们刚开始接触到a标签的时候，我们很多人都有操作过锚点跳转，...
JavaScript实现页面跳转的几种常用方式
11-24
本文实例讲述了JavaScript实现页面跳转的几种常用方式。分享给大家供大家参考，具体如下： 第一种： [removed] [removed].href="login.jsp?backurl="+[removed].href; [removed] 第二种： [removed] alert&#...
js实现页面跳转的五种方法推荐
01-21
js实现页面跳转的五种方法推荐 第一种： 复制代码 代码如下: [removed] [removed].href=”xx.jsp?backurl=”+[removed].href; [removed] 第二种： 复制代码 代码如下: [removed] alert(“返回”); ...
js history对象简单实现返回和前进
12-01
返回和前进用到的是DOM中的history对象： 返回： 代码如下: 返回</a> //相当于调用history对象的back()方法； 前进： 代码如下: 前进</a> //相当于调用history对象的forword()方法；
HTML5 History API 实现无刷新跳转
09-28
发现登陆、注册动画效果非常华丽，但让我感到震惊的是页面竟能够实现无刷新跳转，回顾了所学的前端知识，似乎没有任何技术可以实现这一点，于是百度了一下，才发现这原来是使用HTML5中History API实现的效果
一个小时学习javaScript
最新发布
weixin_43064364的博客
04-20 725
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 961
​​​​​​​。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 367
官网代码（在取消选中状态的时候不生效）
PLSQL的下载与安装
code袁的博客
04-18 501
🦁作者简介：一名喜欢分享和记录学习的在校大学生💥个人主页code袁💥个人QQ🐯个人wechat：code8896凭借其语法突出显示、SQL和PL/SQL帮助、对象描述、代码助手、编译器提示、重构、PL/SQL美化器、代码内容、代码层次结构、代码折叠、超链接导航、宏库和许多其他复杂功能，Unicode兼容编辑器甚至会吸引最苛刻的用户。手动码字，如有错误，欢迎在评论区指正💬~你的支持就是我更新的最大动力💪~
Vue.js（自定义指令）
Luo3255069063的博客
04-18 395
【代码】Vue.js（自定义指令）
移动前端完整代码：通过history对象的方法，实现两个页面之前的前进与后退
05-24
以下是一个简单的移动前端实现通过history对象的方法，实现两个页面之间的前进与后退的代码示例： ```html <!DOCTYPE html> <html> <head> <title>History API Example</title> </head> <body> <h1>Page 1</h1> <p>This is page 1. Click the button below to go to page 2.</p> <button onclick="goToPage2()">Go to Page 2</button> <script> function goToPage2() { // 使用pushState方法将当前页面的状态添加到浏览器历史记录中 history.pushState({}, null, "/page2.html"); // 加载页面2 window.location.href = "/page2.html"; } </script> </body> </html> ``` 在第一个页面中，我们使用了`history.pushState()`方法将当前页面的状态添加到浏览器的历史记录中，并将浏览器重定向到第二个页面。这样，在第二个页面中，我们就可以使用`history.back()`方法返回到第一个页面了。 以下是第二个页面的代码示例： ```html <!DOCTYPE html> <html> <head> <title>History API Example</title> </head> <body> <h1>Page 2</h1> <p>This is page 2. Click the button below to go back to page 1.</p> <button onclick="goBack()">Go Back to Page 1</button> <script> function goBack() { // 返回到前一个页面 history.back(); } </script> </body> </html> ``` 在第二个页面中，我们只需要使用`history.back()`方法就可以返回到第一个页面了。这里不需要使用`window.location.href`方法，因为我们只是想返回到之前的页面，而不是加载一个新的页面。 当然，以上只是一个简单的示例，实际应用中可能需要更复杂的逻辑来处理历史记录的管理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值