历史记录html页面,HTML5 history 页面历史记录

DOM window 对象通过history对象提供了对浏览器历史的访问。

跳转属性

back(): 向后跳转

forward()：向前跳转

go()：跳转至第n页

// 在history中向后跳转

window.history.back();

window.history.go(-1);

// 向前跳转

window.history.forward();

window.history.go(1);

// 当前页

window.history.go(0);

添加和修改历史记录中的条目

pushState(状态对象，标题(可为空)，URL(可选的))：记录历史记录

window.onpopstate：触发调用历史记录

Document

margin: 0;

padding: 0;

}

.body{

background: gray;

}

#box{

width: 800px;

height: 400px;

background-color: #ddd;

margin: 100px auto;

display: flex;

justify-content: space-around;

align-items: center;;

}

ul{

width: 200px;

height:300px;

border: 1px solid #fff;

border-bottom: none;

}

li{

list-style: none;

line-height: 100px;

border-bottom: 1px solid #fff;

text-align: center;

}

#con{

width: 500px;

height: 300px;

border: 1px solid#fff;

}

var list = document.getElementById('list');

var con = document.getElementById('con');

var json = {

'小米': '小米商城',

'华为':'华为商城',

'苹果': '苹果商城'

};

var str = '';

var arr = [];

for (var key in json) {

str +='

' + key + '';

arr.push(json[key])

}

list.innerHTML = str;

console.log('arr',arr);

//以上完成渲染数据

var lis = list.querySelectorAll('li');

for (var i = 0; i < arr.length; i++) {

lis[i].index = i;

console.log('lis',lis[i]);

lis[i].onclick = function () { // 实现点击切换

con.innerHTML = arr[this.index];

window.history.pushState(arr[this.index],'',this.dataset['name']);

}

window.onpopstate = function (e) {

console.log('11')

var e = e || e.target;

console.log(e)

con.innerHTML = e.state;

}

案例：tab切换，记录内容

image.png

历史记录html页面,HTML5 history 页面历史记录相关推荐

html对话框跳转页面,html5各种页面切换效果和模态对话框用法总结
这篇文章主要为大家介绍了html5各种页面切换效果和模态对话框用法总结,较为详细的介绍了HTML5的各种页面元素的使用技巧,非常具有实用价值,需要的朋友可以参考下本文详细总结了html5各种页面切换 ...
html如何添加子页面,html5 父页面调用子页面js方法
父页面代码: var randid=result.rows.item(0)['id']; plus.webview.close("test_order_detail");//创建之 ...
html5 history解决ajax不能加入历史记录的问题
2019独角兽企业重金招聘Python工程师标准>>> 最近抽空研究了html5 history,并写了个小测试,由于只在前端展示,我把对于ajax的处理换为了简单的JS事件,直接复 ...
php修改浏览器地址,HTML5 history API改变浏览器地址无需hash和刷新加载页面
现在很多网站的前端做的非常炫,点击某个链接瞬间改变浏览器的地址栏的地址,改变的方式不是使用锚点,而是直接改变 URL,页面稍后局部加载完成.如果直接复制页面地址在新的浏览器选项卡中打开则是全部加载整个 ...
History操作历史记录
History操作历史记录 Window.history.back()后退 Window.history.forward()前进 Window.history.go(-1)后退为1为前进页面一: ...
阻止微信后退,阻止微信页面关闭 history.pushState 无刷新改变页面URL
阻页面后退防止页面关闭 <!DOCTYPE html> <html> <head><title>阻止微信后退按钮</title> < ...
手机 html5 返回页面不刷新,微信自带浏览器物理返回不刷新问题
问题描述与需求非单页面应用: 在页面A,通过get方式进入页面B之后再回到页面A,这个时候微信iOS版页面不刷新,安卓版微信刷新页面 ---> 所有物理返回都必须强制刷新重新进入页面: 在页面 ...
HTML5手机页面里面如何把长按复制避免
在写HTML5手机页面的时候,有时候会写到一些标签是需要用户长按然后放开的但是微信里面长按就会出现复制,大大影响了用户体验,那么如何可以避免呢? 我也是最近写到这样的页面,总结了一部分,大家可以作为 ...
玩转HTML5移动页面
(1) 动画雪碧图涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)! 网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和G ...
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 “invalid signature“错误解决方案
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案参考文章: (1)vue 单页面(SPA) hist ...

历史记录html页面,HTML5 history 页面历史记录

历史记录html页面,HTML5 history 页面历史记录相关推荐

最新文章

热门文章