location的hash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能
时间:2022-04-22
本文章向大家介绍location的hash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在js跨域双向数据传递时可以用iframe加上location.hash来实现,在研究这个的时候深入学习了一下hash的特性。
hash就是uri中#及后面的部分,例如:www.google.com.hk#123的#123。当只有hash部分发生变化时,浏览器的历史记录会产生记录,但不会向服务器发出请求,这时按后退键地址栏的uri会变化但页面内容不变。
而hash变化但不发出请求就是js跨域双向数据传递的基础啦。
下面就讲述一下hash结合ajax的使用,ajax每次取数据时页面更新后浏览器并不产生历史记录,也就是说后退和前进按钮失去应用的效用,这时可以结合hash和window.onhashchange来使用,注意ie6、7均不支持onhashchange,但可以用setInterval定期检查hash的改变,或者onload中检查的方法。
具体实现:
1 <body>
2
3 <div id="div1"></div>
4 <input type="button" value="click" onclick="GetT()" />
5
6 </body>
7 </html>
8 <script type="text/javascript" src="js/AjaxHasPool.js">
9 </script>
10 <script type="text/javascript">
11 var ajax = new AjaxHasPool();
12 var method="get";
13 var url ="Handler.ashx";
14 var i = 1;
15 var obj = new Object();
16 function GetT()
17 {
18 document.getElementById("div1").innerHTML=i;
19 ajax.Startup(null,url,method,ep);
20 }
21 function ep(xmlobj){
22 eval("obj['"+i+"']="+i+";");
23 location.hash="#"+i;
24 ++i;
25 }
26
27 window.onhashchange=function(){
28 var hashStr = location.hash.replace("#","");
29 if(typeof(eval("obj['"+hashStr+"']"))!="undefined")
30 document.getElementById("div1").innerHTML=eval("obj['"+hashStr+"']");
31 }
32 </script>
1.AjaxHasPool是自己封装的ajax类,其中的ajax.Startup()就是发送ajax请求;
2.Object对象保存历史记录,如果对象属性为数字的话,要用obj["1"]的方式来实例化,否者会违反命名规范。
3.在使用window.onhashchange检测hash值获取历史数据。
- Nginx+upstream针对后端服务器容错的运维笔记
- MongoDB日常运维操作命令小结
- flash builder代码格式化以及其它快捷键
- Repeater,DataList,DataGrid
- flash/flex builder在IE中stage.stageWidth始终为0的解决办法
- MongoDB集群运维笔记
- 水晶报表WEB方式下不打印的问题
- 针对负载均衡集群中的session解决方案的总结
- sliverlight:CompositionTarget.Rendering 的问题
- 分布式监控系统Zabbix-批量添加聚合图形
- as3: this,stage,root的测试
- 通过iptables限制sftp端口连接数
- Jenkins迁移及日常操作的一点总结
- Nginx反向代理中使用proxy_redirect重定向url
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Lombok 的作者,成功讨伐 IntelliJ IDEA!
- springboot2之优雅处理返回值
- 通过NVM管理Node.js多版本
- 探究 Android 签名机制和原理
- “有迹可循”的灰盒测试分析
- 想用 Gitee 做图床工具,失败了~~
- Nginx系列:配置跳转的常用方式
- Python骚操作:一行代码实现探索性数据分析
- 吊打 Tomcat ,Undertow 性能很炸!!
- 关于在android平台使用nanohttpd实现的http服务在WIFI环境下响应明显太慢的问题
- Vue.js组件库Element中的Select选择器、Cascader级联选择器、Switch开关和Slider滑块
- 年收200万+的Facebook前端工程师(E5)都要求些啥能力?
- 重学数据结构(二、栈)
- 基于深度学习的人员跟踪
- 为了给女朋友独特的七夕惊喜,我学会了人像美肤算法!