HTML5管理与实际历史的分析(history物)

HTML5管理与实际历史的分析(history物)

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

  HTML5新进入历史的管理,更新history对象允许国家的经营历史更方便。

在现代Web应用。用户”前进”和”退却”button切换历史页面。这使得新的页码不会打开一个新的网页前进和后退自如,改善用户体验。

  经haschange事件,可以知道URL的參数什么时候发生了变化,也就是什么时候该有所反应。

通过状态管理的API,可以在不载入新页面的情况下改变浏览器的URL。所以须要使用history.pushState()方法。

history.pushState()方法接收三个參数:1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)。小样例例如以下

  JavaScript代码

history.pushState({name: "menglong"}, '', "li.html");

  运行了history.pushState()方法后,新的状态信息就会被增加到历史状态栈,而浏览器地址栏也会变成新的相对URL。

可是,浏览器并不会想server发送请求。即使历史状态改变之后查新location.href也会返回与地址栏中同样的地址。

另外,第二个參数眼下还没有浏览器实现,所以全然能够仅仅传入一个空字符串就可以,或者一个短标题也能够。

第一个參数则应该尽可能提供初始化页面状态所需的各种信息。

  由于history.pushState()方法会创建新的历史状态,所以会发现”后退”button也能够使用了。按下”后退”button,会触发window对象的popstate事件。Popstate事件的事件对象有一个state属性,这个属性就包括着当初以第一个參数传递给pushState()的状态对象。

小样例例如以下

  JavaScript代码

window.addEventListener('popstate',function(ev){
	var state = event.state;
	if(state){ // 当第一个页面载入的时候state为空
		processState(state)
	}
}, false);

  得到了这个状态的对象后。必须把页面重置为状态对象中的数据表示的状态(由于浏览器不会自己主动为你做这些)。记住,浏览器载入的第一个页面没有状态,所以”后退”阿牛返回浏览器载入的第一个页面时。event.state值为null。

  要更新当前历史状态,能够调用replaceState(),传入的參数与pushState()方法的前两个參数同样。

调用replaceState()不会在历史状态栈中创建新状态,仅仅会重写当前状态。

小样例例如以下

  JavaScript代码

history.replaveState({name: "meng"}, "meng1234");

  在使用HTML5的历史状态管理机制的时候。须要确保使用pushState()创造的每个”假”URL。在Webserver上都有一个真的、实际存在的URL与之相应。

否则,单机”刷新”button会导致404错误。

  支持HTML5历史状态管理的浏览器有Chrome、Safari 5+、Firefox 4+和Opera 11.5+。在Safari和Chrome中,传递给pushState()或replaceState()的状态对象中不能包括DOM元素。

而Firefox支持在状态对象中包括DOM元素。Opera还支持一个history.state属性,它返回当前状态的状态对象。以下就是小样例时间了,结合小样例才干更好的理解HTML5中的历史管理。

  加入href值实现历史管理

  HTML代码

<input type="button" value="35选7" id="input1" />
<div id="div1"></div>

  JavaScript代码

//onhashchange : 事件 : 当hash值改变的时候触发的事件

//hash改变就会出现就会出现历史管理

window.onload = function(){
	var oInput = document.getElementById('input1');
	var oDiv = document.getElementById('div1');
	
	var obj = {};
	
	oInput.onclick = function(){
	
		var number = randomNum(35,7);
		
		oDiv.innerHTML = number;
		
		var oRN = Math.random();
		
		obj[oRN] = number;
		
		window.location.hash = oRN;
	
	};
	
	
	window.onhashchange = function(){
	
		var number = obj[window.location.hash.substring(1)] || '';
		
		oDiv.innerHTML = number;
	
	};
	
	
	function randomNum(alls,now){
	
		var arr = [];
		var newArr = [];
		
		for(var i=1;i<=alls;i++){
			arr.push(i);
		}
		
		
		for(var i=0;i<now;i++){
			newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1 ) );
		}
		
		return newArr;
	
	}
	
};

  通过HTML5中history对象实现历史管理

  HTML代码

<input type="button" value="35选7" id="input1" />
<div id="div1"></div>

  JavaScript代码

//pushState : 三个參数:1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)

//history.pushState({name: "menglong"}, '', "li.html");

window.onload = function(){
	var oInput = document.getElementById('input1');
	var oDiv = document.getElementById('div1');
	
	var iNow = 0;
	
	oInput.onclick = function(){
	
		var number = randomNum(35,7);
		
		oDiv.innerHTML = number;

		history.pushState(number,'',iNow++);
	
	};
	
	
	window.onpopstate = function(ev){  //历史管理改变,就会触发
		
		var number = ev.state || '';

		oDiv.innerHTML = number;
		
	};
	
	
	function randomNum(alls,now){
	
		var arr = [];
		var newArr = [];
		
		for(var i=1;i<=alls;i++){
			arr.push(i);
		}
		
		
		for(var i=0;i<now;i++){
			newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1 ) );
		}
		
		return newArr;
	
	}
	
};

  HTML5实战与剖析之历史管理(history对象)就为大家介绍到这里了。很多其它有关HTML5的相关小内容尽在梦龙小站的HTML5实战与剖析频道。

感谢大家的支持。

版权声明:本文博主原创文章,博客,未经同意不得转载。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116790.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • HTML标签学习

    HTML标签学习

  • Python实现AI视频识别——手势控制[通俗易懂]

    Python实现AI视频识别——手势控制[通俗易懂]用opencv识别手势实现原理代码importcv2importmediapipeasmpclasshandDetector():#经典OOP#设置初始条件def__init__(self,mode=False,maxHands=2,detectionCon=0.5,trackCon=0.5):self.mode=modeself.maxHands=maxHands#最多同时出现几只手

  • c语言课程设计图书管理系统 报告_课程设计图书管理系统

    c语言课程设计图书管理系统 报告_课程设计图书管理系统实训项目名称:图书管理系统的设计与实现1.实训目的开发一个小型的图书管理应用软件,使用该软件可以实现图书信息的登记、浏览、借书、还书、删除和更新等操作。通过该系统的实现可以了解C++连接数据库的原理和技术,掌握VC界面的设计方法。2.实训要求(1)选择适当的程序开发语言(建议用C或C++)和数据库系统,完成实训内容。(2)程序能够正常运行,运算结果正确,满足设计要求。3.功…

    2022年10月10日
  • 智能家居、智慧社区与智慧城市的关系_智能家居有哪些

    智能家居、智慧社区与智慧城市的关系_智能家居有哪些物联网技术可让智能家居应用变得更方便。过去几年年可说是智能家居生态链成形的关键年,许多科技大厂如Google并购Nest/Dropcam、三星并购SmartThings等,或是合作建立物联网联盟,如Qualcomm建立Allseen、Intel及三星主导OIC等,积极建立智能家居管理平台,提供有意进军智能家居的业者API,整合第三方软硬件资源,…

    2022年10月17日
  • iptable 链表「建议收藏」

    iptable 链表「建议收藏」iptable五链4表PREROUTING的规则可以存在于:raw表,mangle表,nat表。INPUT的规则可以存在于:mangle表,filter表,(centos7中还有nat表,centos6中没有)。FORWARD的规则可以存在于:mangle表,filter表。OUTPUT的规则可以存在于:raw表mangle表,nat表,filter表。POSTROUTING的规则可以存在于:mangle表,n

  • SPI的原理_托里拆利实验原理讲解

    SPI的原理_托里拆利实验原理讲解什么是SPISPI是英语SerialPeripheralinterface的缩写,顾名思义就是串行外围设备接口。是Motorola(摩托罗拉)首先在其MC68HCXX系列处理器上定义的。SPI,是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用四根线,节约了芯片的管脚,同时为PCB的布局上节省空间,提供方便,主要应用在EEPROM,FLASH,实时时钟,AD转换器,还有数字…

    2022年10月15日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号