h5-history解析
时间:2022-07-25
本文章向大家介绍h5-history解析,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
h5-history解析
这是一个不太常用的api,但有一些场景比较适用,比如说,某用户填写了一个很复杂的表单,点了一下回退,就回退了一个网页,那用户的填写的所有信息都没了,那么,history就可以派上用场了 我们来看一下这个实例把
<input type="text" id="search"/>
<button id="btn"></button>
<div id="main"></div>
var oInput = document.getElementById("search");
//造假数据
var data = [{
name: "html"
},
{
name: 'css'
},
{
name: 'js'
},
{
name: 'panda'
},
{
name: 'monkey'
}
];
function search(){
var inpValue = oInput.value;
var res = data.filter(function(ele){
if(ele.name.indexOf(inpValue) > -1){
return ele;
}
})
//做兼容性处理,如果输入框为空展示所有列表
if(inpValue == ""){
res = data;
}
history.pushState({inpVal:inpValue}, null, "#" + inpValue);
render(res);
}
function render(renderData){
var content = '';
for(var i = 0; i < renderData.length; i++){
content += "<div>" + renderData[i].name + "</div>";
}
document.getElementById("main").innerHTML = content;
}
window.addEventListener("popState", function(e){
oInput.value = e.state.inpVal;
//这里不能直接调用Search方法,因为调用会push进state中
var res = data.filter(function(ele){
if(ele.name.indexOf(oInput.value) > -1){
return ele;
}
})
if(oInput.value== ""){
res = data;
}
render(res);
})
上述代码可以达到前进后退效果,如果有同学代码贴过去报错,可以评论,会修复
这里还需要补充一个方法。监听锚点的变化
window.addEventListener("hashchange", function(e){
//此方法锚点,或者hash发生改变的时候,触发的方法
})
popState和hashchagne方法比较
- popState是url发生改变时触发,并且执行顺序上,popState优先于hashchange
- hashchange只有在锚点发生变化时候才能触发,如果,url没有设置锚点,则监测不到。
- 综上所述,popState更加常用,一些复杂场景需要配合使用。
- WCF技术剖析之二:再谈IIS与ASP.NET管道
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(61)-如何使用框架来开发
- (保存)C#基础概念二十五问
- flash留言本
- 这或许是2017年最有设计感的“无人车”推文
- 世界首条光伏高速公路:能发电,能充电,能化雪
- WCF技术剖析之四:基于IIS的WCF服务寄宿(Hosting)实现揭秘
- 简练的视图模型 ViewModel
- 提供智能服务?先迈过数字信任这个坎
- 《天弋夺宝》—01飞船的控制
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(63)-Excel导入和导出
- 核心代码(未注释)
- 从科研角度谈“如何实现基于机器学习的智能运维”
- 用后台代码创建Storyboard
- 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 数组属性和方法
- Swift高阶函数map,filter,reduce
- 一文解决大批量基因相关性分析
- Swift String 与 NSString
- 30.opengl高级光照-HDR
- Angular bootstrap的一个例子
- MicrobiomeAnalyst | 零代码分析宏基因组数据
- Java8实战——通过行为参数化传递代码 顶
- Angular component的一个例子
- 初识mybatis中的缓存
- 【卷积神经网络结构专题】ResNet及其变体的结构梳理、有效性分析
- Steganographer:能帮助在图片中隐藏数据的Python隐写工具
- 内网横向移动:Kerberos认证与(哈希)票据传递攻击
- 诺禾致源linux下数据下载
- 技巧 | OpenCV中如何绘制与填充多边形
- Swift guard