返回顶部
首页 > 资讯 > 前端开发 > JavaScript >HTML5中history怎么用
  • 893
分享到

HTML5中history怎么用

2024-04-02 19:04:59 893人浏览 安东尼
摘要

这篇文章主要为大家展示了“HTML5中history怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5中history怎么用”这篇文章吧。一、认识w

这篇文章主要为大家展示了“HTML5中history怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5中history怎么用”这篇文章吧。

一、认识window.history

window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象。window对象通过history对象提供对览器历史记录的访问能力。它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退。

1、历史记录的前进和后退

在历史记录中后退,可以这么做:

window.history.back();

这就像用户点击浏览器的后退按钮一样。

类似的,你可以前进,就像在浏览器中点击前进按钮,像这样:

 window.history.forward();

2、移动到指定历史记录点

通过指定一个相对于当前页面位置的数值,你可以使用Go()方法从当前会话的历史记录中加载页面(当前页面位置索引值为0,上一页就是-1,下一页为1)。

要后退一页(相当于调用back()):

 window.history.go(-1);

向前移动一页(相当于调用forward()):

window.history.go(1);

类似的,传递参数“2”,你就可以向前移动2个记录点。你可以查看length属性值,了解历史记录栈中一共有多少个记录点:

window.history.length;

二、修改历史记录点

HTML5的新api扩展了window.history,使历史记录点更加开放了。可以存储当前历史记录点、替换当前历史记录点、监听历史记录点,下面逐一简要说明一下。

1、存储当前历史记录点

存储的方式类似于数组的入栈(Array.push()),在window.history里新增一个历史记录点,例如:

// 当前的url为:Http://qianduanblog.com/index.html
var JSON={time:new Date().getTime()};
// @状态对象:记录历史记录点的额外对象,可以为空
// @页面标题:目前所有浏览器都不支持
// @可选的url:浏览器不会检查url是否存在,只改变url,url必须同域,不能跨域
window.history.pushState(json,"","http://qianduanblog.com/post-1.html");

执行了pushState方法后,页面的url地址为qianduanblog.com/post-1.html。

2、替换当前历史记录点

window.history.replaceState和window.history.pushState类似,不同之处在于replaceState不会在window.history里新增历史记录点,其效果类似于window.location.replace(url),都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。

3、监听历史记录点

监听历史记录点,直观的可认为是监听URL的变化,但会忽略URL的hash部分,监听URL的hash部分,HTML5有新的API为onhashchange,我的博客里也有说到该方法和跨浏览器的兼容解决方案。可以通过window.onpopstate来监听url的变化,并且可以获取存储在该历史记录点的状态对象,也就是上文说到的json对象,如:

// 当前的url为:http://qianduanblog.com/post-1.html
window.onpopstate=function()
{
    // 获得存储在该历史记录点的json对象
    var json=window.history.state;
    // 点击一次回退到:http://qianduanblog.com/index.html
    // 获得的json为null
    // 再点击一次前进到:http://qianduanblog.com/post-1.html
    // 获得json为{time:1369647895656}
}

值得注意的是:javascript脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate事件。

还有一点注意的是,谷歌浏览器和火狐浏览器在页面第一次打开的反应是不同的,谷歌浏览器奇怪的是回触发onpopstate事件,而火狐浏览器则不会。

以上是“HTML5中history怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: HTML5中history怎么用

本文链接: https://www.lsjlt.com/news/81644.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • HTML5中history怎么用
    这篇文章主要为大家展示了“HTML5中history怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“HTML5中history怎么用”这篇文章吧。一、认识w...
    99+
    2024-04-02
  • HTML5中History模式如何实现
    这篇文章将为大家详细讲解有关HTML5中History模式如何实现,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、history.pushStatehistory.pu...
    99+
    2024-04-02
  • HTML5中History模式的示例分析
    这篇文章给大家分享的是有关HTML5中History模式的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。最近看到vue-router的HTML5 History 模式路由...
    99+
    2024-04-02
  • linux中怎么用History命令
    这篇文章将为大家详细讲解有关linux中怎么用History命令,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1、命令历史记录中加时间默认情况下如下图所示,没有命令执行时间,不利于审计分析。通过设置exp...
    99+
    2023-06-15
  • Bash中的history命令怎么用
    小编给大家分享一下Bash中的history命令怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!history 是内置的命令history 命令与许多其他的命...
    99+
    2023-06-15
  • linux中怎么使用Bash history命令
    这篇文章主要为大家展示了“linux中怎么使用Bash history命令”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“linux中怎么使用Bash history命令”这篇文章吧。Bash 的...
    99+
    2023-06-15
  • 怎么在Linux中使用history命令
    这篇文章主要介绍怎么在Linux中使用history命令,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!用强大的 history 命令使你的命令行提示符更有效率。随着我在终端中花费越来越多的时间,我感觉就像在不断地寻找...
    99+
    2023-06-16
  • history命令怎么在Linux中使用
    今天就跟大家聊聊有关history命令怎么在Linux中使用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。Linux中的history命令很常用,无论是对管理员,普通用户还是黑客。对...
    99+
    2023-06-13
  • HTML5中History API如何实现无刷新跳转
    这篇文章将为大家详细讲解有关HTML5中History API如何实现无刷新跳转 ,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。有一次在上**网的时候,发现登陆、注册动画效果非常华丽,但让我感到震惊的是页...
    99+
    2023-06-09
  • JavaScript中History的back和forward怎么使用
    本篇内容介绍了“JavaScript中History的back和forward怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大...
    99+
    2024-04-02
  • Linux history命令怎么使用
    这篇文章主要介绍“Linux history命令怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Linux history命令怎么使用”文章能帮助大家解决问题。history命令用于显示指定数...
    99+
    2023-06-27
  • HTML5中H5Slides怎么用
    这篇文章主要介绍HTML5中H5Slides怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!H5Slides是一款基于HTML5的轻量级幻灯片播放系统,以前我们给客户演示幻灯片时...
    99+
    2024-04-02
  • html5中pause()怎么用
    小编给大家分享一下html5中pause()怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实例带有播放和暂停按钮的一段视频...
    99+
    2024-04-02
  • html5中contextmenu怎么用
    这篇文章主要为大家展示了“html5中contextmenu怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5中contextmenu怎么用”这篇文...
    99+
    2024-04-02
  • html5中ondrag怎么用
    这篇文章给大家分享的是有关html5中ondrag怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。实例在 <p> 元素开始拖动时执行...
    99+
    2024-04-02
  • html5中margin怎么用
    这篇文章主要介绍“html5中margin怎么用”,在日常操作中,相信很多人在html5中margin怎么用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html5中marg...
    99+
    2024-04-02
  • html5中output怎么用
    小编给大家分享一下html5中output怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 在h...
    99+
    2024-04-02
  • html5中style怎么用
    这篇文章主要介绍了html5中style怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 用法:1、用于规定...
    99+
    2024-04-02
  • html5中canvas怎么用
    这篇文章给大家分享的是有关html5中canvas怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。大家都知道,目前并不是所有的浏览器中支持html5,就算是支持html5的浏...
    99+
    2024-04-02
  • html5中mark怎么用
    这篇文章主要介绍了html5中mark怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 在html5中,ma...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作