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

html5的onhashchange和history历史管理

html5JavaScript 
阅读更多
作者：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>



如果您觉得本文的内容对您的学习有所帮助，您可以微信：
分享到：
| Javascript语言精粹-毒瘤和糟粕
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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值改变时，页面不会跳转到新地址，但...

Magicbox
Global site tag (gtag.js) - Google Analytics