`
zccst
  • 浏览: 3315562 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html5的onhashchange和history历史管理

阅读更多
作者:zccst

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

HTML5有两种解决办法:

1,onhashchange
用到了window.loaction.hash对象(存,取)


2,history

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


本质上:两种方式都是存值+取值事件。简化后就是:
window.loaction.hash = srcArr;
window.onhashchange=function(){
    var val = window.loaction.hash;
}

history.pushState = srcArr;
window.onpopstate=function(event){
    var val = event.state;
};


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript">

window.onload=function (){
	var oInput = document.getElementById("input1");
	oInput.onclick=function(){
		var oDiv = document.getElementById("div1");
		var num = generateNum (6);

		//onhashchange
		window.location.hash = num;
		window.onhashchange = function(){
			oDiv.innerHTML = window.location.hash.substring(1);
		}
		

		//history
		/*
		history.pushState(num, '');
		window.onpopstate = function(event){
			oDiv.innerHTML=event.state;
		}*/
		oDiv.innerHTML=num;


		//生成随机数
		function generateNum (num){
			var ret = [];
			for (var i = 0; i < num; i++) {
				ret.push(Math.ceil(100*Math.random()));
			};
			return ret;
		}
	}
}


</script>
</head>

<body>
	中奖号码:
<div id="div1"></div>

<input type="button" value="生成随机号码" id="input1" />
</body>
</html>





如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
评论

相关推荐

    iframe记录历史记录(onhashchange)

    在IT行业中,`iframe` 和 `onhashchange` 是两个重要的前端开发概念,它们与页面的历史记录管理和单页面应用(SPA)的实现密切相关。本文将深入探讨这两个话题,并结合提供的标签"源码"和"工具",分析如何利用它们来...

    vue-router中的hash和history两种模式的区别

    HTML5的history API包含两个主要方法:pushState和replaceState。这两个方法允许我们对浏览器历史记录进行管理,能够控制浏览器历史记录栈中的记录。 ```javascript history.pushState({color:'red'}, 'red', 'red'...

    详解HTML5之pushstate、popstate操作history,无刷新改变当前url

    总结起来,HTML5的`pushState`和`popstate`提供了无刷新改变URL的能力,结合`history`对象的其他方法,开发者可以创建出更加丰富的用户体验,如单页应用(SPA)中的导航和历史管理。理解并熟练运用这些API,能有效提升...

    纯html静态页传值.

    5. HTML5 History API: 通过改变浏览器的历史记录,可以在URL不变的情况下传递数据。例如,使用`history.pushState()`或`history.replaceState()`方法,将数据以状态对象的形式添加到历史记录中,然后在其他页面中...

    页面禁止各种浏览器后退.txt

    HTML5引入了一个新的API——History API,它允许JavaScript改变浏览器的历史记录栈,而不必重新加载整个页面。这个API提供了以下三个方法: - **`pushState()`**:向历史记录栈添加一个新的条目。 - **`...

    区分vue-router的hash和history模式

    HTML5 引入的 History API 提供了 `pushState` 和 `replaceState` 方法,使得开发者可以在不重新加载页面的情况下更改浏览器的历史记录。Vue Router 的 history 模式利用了这些方法,允许创建更干净的 URL,去除 `#`...

    11-vue-router-模式.md

    - 特点:依赖HTML5的History API,可以创建更美观、更规范的URL。 - 触发机制:使用`history.pushState`和`window.onpopstate`事件来实现URL的变化和监听。 - 刷新行为:刷新页面会导致服务器端接收到请求并返回...

    Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解).doc

    另一方面,history模式提供了更优雅的URL,如`http://example.com/home`,它基于HTML5的`History`接口,利用`pushState`和`popstate`事件来管理浏览历史记录。在这种模式下,虽然URL看起来像是服务器端的路由,但...

    资源之前端模拟面试题

    - **原理**:history 模式利用了 HTML5 的 `pushState` 和 `replaceState` 方法来修改浏览器的历史记录,这样就可以改变 URL 而不发送新的请求。但是,由于服务器实际上没有对应的资源,因此需要配置服务器来将所有...

    对ajax前进后退的处理

    在实际项目中,还可以考虑使用jQuery的插件,如`History.js`或`jQuery BBQ`,它们提供了更完善的`hash`管理和历史记录支持,简化了开发过程。在提供的`cyzshenzhen-jquery_history_demo-master`压缩包中,可能包含了...

    vue-router路由模式详解(小结)

    - **History 模式**:依赖于 HTML5 的 History API,如 `pushState` 和 `replaceState`,可以创建和修改浏览历史记录,使 URL 更加友好,例如 `http://example.com/home`。不过,启用此模式需要服务器配置,以便在...

    js实现无刷新监听URL的变化示例代码详解

    HTML5 的 History API 提供了 `history.pushState()` 和 `history.replaceState()` 方法,它们允许我们在不刷新页面的情况下修改浏览器的历史记录。这两个方法都有三个参数:状态对象、标题(目前大多数浏览器忽略此...

    AJAX页面状态保持思路详解

    - HTML5规范定义了history对象的pushState和replaceState方法,允许我们在不刷新页面的情况下修改浏览器的历史记录。这对于实现更平滑的页面跳转和状态管理非常有用。 - 除了pushState和replaceState方法,HTML5还...

    JavaScript不刷新实现浏览器的前进后退功能

    首先,HTML5通过History API提供了history对象,该对象允许我们操作浏览器的历史记录,即使在AJAX应用中也可以实现前进和后退的功能。History对象的属性和方法主要包括: 1. `length`属性:它返回浏览器历史记录中...

    详解SPA中前端路由基本原理与实现方式

    HTML5的`History`接口允许我们在不实际加载新页面的情况下改变浏览器的历史记录。通过`pushState`和`replaceState`方法,我们可以改变URL并更新历史记录,而`popstate`事件则用来监听这些改变。然而,这种方法需要...

    js实现无刷新监听URL的变化的示例代码

    2. **通过History API改变路由**:HTML5引入了History API,允许开发者在不刷新页面的情况下修改URL。主要有以下方法: - `history.back()`:返回浏览器会话历史中的上一页。 - `history.forward()`:前往浏览器...

    Ajax回退刷新页面问题的解决办法

    HTML5的出现,引入了history.pushState和history.replaceState两个API,这两个API允许我们操作浏览器的历史记录,从而解决传统AJAX在回退刷新页面时出现的问题。通过使用这两个API,开发者可以在不刷新页面的情况下...

    解决浏览器记住ajax请求并能前进和后退问题

    这种方法的核心在于利用了HTML5 History API中的`pushState`方法和`replaceState`方法,以及改变URL的hash部分(即URL中的#后内容)来记录历史状态。 在Web页面中,URL的hash值改变时,页面不会跳转到新地址,但...

Global site tag (gtag.js) - Google Analytics