html5的onhashchange和history历史管理

最新推荐文章于 2022-08-18 09:00:00 发布
最新推荐文章于 2022-08-18 09:00:00 发布
阅读量106 收藏 1
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/shsgl/p/4289925.html
版权

html5的onhashchange和history历史管理

现在的开发，越来越倾向于页面内跳转，这种情况下需要更新自己的知识，来实现页面内跳转。history就是解决这个问题的。

HTML5有两种解决办法：

1，onhashchange
用到了window.loaction.hash对象（存，取）


2，history

(1) pushstate 三个参数：数据，标题（为空），url（可选）。
(2) popstate是一个事件，读取event.state数据
注意：url是虚假的。用户不能实际找到。


本质上：两种方式都是存值+取值事件。简化后就是：
window.loaction.hash = srcArr;
window.οnhashchange=function(){
    var val = window.loaction.hash;
}
和
history.pushState = srcArr;
window.onpopstate=function(event){
    var val = event.state;
};


详情参考如下参数随机数例子：

Html代码   收藏代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5. <title>无标题文档</title>  
    6.   
    7. <script type="text/javascript">  
    8.   
    9. window.οnlοad=function (){  
    10.     var oInput = document.getElementById("input1");  
    11.     oInput.οnclick=function(){  
    12.         var oDiv = document.getElementById("div1");  
    13.         var num = generateNum (6);  
    14.   
    15.         //onhashchange  
    16.         window.location.hash = num;  
    17.         window.onhashchange = function(){  
    18.             oDiv.innerHTML = window.location.hash.substring(1);  
    19.         }  
    20.           
    21.   
    22.         //history  
    23.         /*  
    24.         history.pushState(num, '');  
    25.         window.onpopstate = function(event){  
    26.             oDiv.innerHTML=event.state;  
    27.         }*/  
    28.         oDiv.innerHTML=num;  
    29.   
    30.   
    31.         //生成随机数  
    32.         function generateNum (num){  
    33.             var ret = [];  
    34.             for (var i = 0; i < num; i++) {  
    35.                 ret.push(Math.ceil(100*Math.random()));  
    36.             };  
    37.             return ret;  
    38.         }  
    39.     }  
    40. }  
    41.   
    42.   
    43. </script>  
    44. </head>  
    45.   
    46. <body>  
    47.     中奖号码：  
    48. <div id="div1"></div>  
    49.   
    50. <input type="button" value="生成随机号码" id="input1" />  
    51. </body>  
    52. </html> 

转载于:https://www.cnblogs.com/shsgl/p/4289925.html

weixin_30555125
关注
url的hash和HTML5的history模式
webchang的博客
01-18 1373
url的hash模式和HTML5的history模式，两者的含义和区别
区分vue-router的hash和history模式
10-14
HTML5 引入的 History API 提供了 `pushState` 和 `replaceState` 方法，使得开发者可以在不重新加载页面的情况下更改浏览器的历史记录。Vue Router 的 history 模式利用了这些方法，允许创建更干净的 URL，去除 `#`...
onhashchange和history
一路有你
05-10 441
html5中提供2个事件供前端工程师给客户提供好的用户体验。 具体作用： 在同一个页面，去查看之前的历史。 栗子： 彩票的小栗子    (不采用该事件，无法查看之前产生的数据结果）
HTML之onhashchange
weixin_34296641的博客
03-19 160
HTML之onhashchange.pdf 1. onhashchange介绍 onhashchange是HTML5的特性，当前主流的新版本浏览器都支持，但IE7、IE6不支持。 对于一个URL，如：http://aquester.cublog.cn#abc123，“#”后面的abc123即为hash内容，当它...
jq用什么原理写单页面 js,jq监听hash
wlm_0214的博客
09-09 385
用jq能写单页面吗,这个导航然是可以了,原理,是监听hash的变化,是滴,但是函数名字我给忘记了.so,专门写一篇博客来记一下,,,,, if( ("onhashchange" in window) && ((typeof document.documentMode==="undefined") || document.documentMode==8)) { // 浏览...
hash和history
qq_45838276的博客
08-18 344
1、由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 onhashchange 事件（hashchange只能改变 # 后面的url片段）；虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响，因此改变hash值不会重新加载页面。......
onhashchange事件
chen_wen_xian的专栏
05-25 5556
onhashchange 事件：是一个新的事件，改事件在location.hash发生改变的时候触发。FF3.6a2, IE 8, Chrome 4.0.206.1均支持该事件。该事件在ajax无刷新页面提交中，能带来更好的用户体验。 window.location.hash属性介绍： location是javascript里边管理地址栏的内置对象，比如location.href就管理页
iframe记录历史记录(onhashchange)
04-21
在IT行业中，`iframe` 和 `onhashchange` 是两个重要的前端开发概念，它们与页面的历史记录管理和单页面应用（SPA）的实现密切相关。本文将深入探讨这两个话题，并结合提供的标签"源码"和"工具"，分析如何利用它们来...
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
11-21
总结起来，HTML5的`pushState`和`popstate`提供了无刷新改变URL的能力，结合`history`对象的其他方法，开发者可以创建出更加丰富的用户体验，如单页应用(SPA)中的导航和历史管理。理解并熟练运用这些API，能有效提升...
vue-router中的hash和history两种模式的区别
10-18
HTML5的history API包含两个主要方法：pushState和replaceState。这两个方法允许我们对浏览器历史记录进行管理，能够控制浏览器历史记录栈中的记录。 ```javascript history.pushState({color:'red'}, 'red', 'red'...
单页面hash跳转简要记录
yanyan19880509的专栏
09-05 4673
现在有越来越多的需求，需要在一个复杂页面（有很多ajax异步操作，使用 js 来控制页面的展示）实现导航，书签之类的功能，同时支持浏览器向前向后浏览。由于兼容性问题，目前有三种实现的方案。这里作一下简要记录： 1.  pushState html5 提供了新的 history api，可以让开发者动态修改浏览器的url，而不会引起整个页面的重绘，给用户带来更好的体验，api 定义如下：
onhashchange
05-17 3348
onhashchange事件 触发条件 location.hash发生改变的时候触发, *注意hashchange事件触发并不会刷新页面,而只是页面的滚动 *准确来说是展示对应的锚点,张鑫旭大神的锚点解说 默认参数 window.onhashchange = function(e){} /* e --&amp;gt; HashChangeEvent 包含 { old...
location.hash的用法及onhashchange (精华，建议大家没事读一下)
babybk的博客
05-08 6万+
location.hash是什么: 熟悉HTML都知道喵链接，没错，location.hash就是获取或设置喵链接的。上面的用法相信大家都知道，但是下面的就要考细节了。 当我们载入一个页面后，然后又去触发了一个AJAX请求去部分改变了页面上的内容，这个时候，你会发现，浏览 器其实并没有记录这两个动作，而是把这两个动作记录为了一个动作，即是认为你只打开一个页面，所以“前进/后退”按钮就没有用
使用onhashchange和hash实现无刷新页面
weixin_30673611的博客
06-27 288
1、例子：http://blog.csdn.net/aitangyong/article/details/46455627 2、自己的例子 // onhashchange可以监控hash变化 window.onhashchange=function(){ var hash = window.location.hash; var id = parseInt(ha...
Hash、onHashChange事件
峰际流云
10-01 8424
现在的web应用程序越来越多的使用ajax异步请求完成页面的无缝刷新，导致浏览器的URL不会发生任何变化而完成了请求， 从而破换了用户浏览体验。同时本次浏览的页面内容在用户下次使用URL访问时将无法重新呈现。而解决该问题的一个途径 便是使用window.location.hash属性及window的onhashchange事件。下面具体介绍几个使用过程中必须理解的要点： 1、hash值浏览器
URL中“#” “？” &“”号的作用
热门推荐
年少的博客
09-16 7万+
一、URL特殊符号解析 URL无法显示某些特殊符号，这个时候就要使用编码了。编码的格式为：一个百分号，后面跟对应字符的ASCII（16进制）码值。例如，空格的编码值是”%20“。 　　URL中易出现的特殊字符： 特殊含义 十六进制 + 表示空格（在URL中不能使用空格） ...
单页应用和多页应用、路由、 window.onhashchange、路由使用、vue-router、router-view、router-link、router-link-exact-active
weixin_65100963的博客
05-11 695
单页应用和多页应用、路由、 window.onhashchange、路由使用、vue-router、router-view、router-link、router-link-exact-active、页面跳转传参、vue路由传参的方式、路由-重定向、路由404、编程式导航、this.$router.push('/路由路径')、路由嵌套 children......
onhashchange原理
最新发布
05-26
该事件的原理是利用浏览器的前进和后退功能，通过监听 `window` 对象上的 `hashchange` 事件来实现。 当 URL 的锚点部分发生变化时，浏览器会自动将新的锚点部分添加到浏览器历史记录中，并触发 `hashchange` 事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值