用pushState写一个router

最新推荐文章于 2024-01-06 11:15:13 发布

JarunWang

最新推荐文章于 2024-01-06 11:15:13 发布

阅读量916

点赞数

分类专栏： DEMO分享文章标签： html5 router 改变url 监听url pushState

本文链接：https://blog.csdn.net/rth362147773/article/details/53436158

版权

DEMO分享专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言：

日常我们使用着各种的router.BACKBONE-router,REACT-router等。但就几个页面的小项目，还要引用这些大型工具。就觉得特别麻烦。

能有一种简便的，几行代码就能实现的router。能。

HTML5里引用了新的API，history.pushState和history.replaceState，就是通过这个接口做到无刷新改变页面URL的。

router例子：

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="UTF-8"/>
		<script src="test.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var index = 'index.html';
			
			function changeURL(){
				var url = index+'#'+document.getElementById('urlVal').value;
				var state = {
				    title: window.document.title,
				    url: window.location.href,
				    time:new Date().getTime()
				};
				window.history.pushState(state, document.title, url);//添加到历史记录
			}
			
			window.onhashchange = function(e){//根据hash值变化 触发
				console.log(e.oldURL)
				document.getElementsByTagName('h1')[0].innerHTML = e.newURL;
			}
		</script>
	</head>
	<body >
		<h1>首页</h1>
		<input type="text" name="" id="urlVal"  />
		<input type="button" name="" id="" value="改变当前URL" οnclick="changeURL()" />
		</br>
		<input type="button" name="" id="" value="返回" οnclick="window.history.back()" />
		<input type="button" name="" id="" value="前进" οnclick="window.history.forward()" />
	</body>
</html>

说明pushState和replaceState？

window 对象通过history对象提供对浏览器历史记录的访问能力。它暴露了一些非常有用的方法和属性，让你在历史记录中自由前进和后退，而在HTML5中，更可以操纵历史记录中的数据。而其中history.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目。这些方法可以协同window.onpopstate事件一起工作。history.pushState()方法和history.replaceState()方法可以不刷新页面而改变当前的URL。

Feature	历史记录	例子
pushState	添加	history.pushState(state, title, url)
replaceState	不添加	history.pushState(state, title, url)

状态对象（state object）： 一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。

任何可序列化的对象都可以被当做状态对象。因为FireFox浏览器会把状态对象保存到用户的硬盘，这样它们就能在用户重启浏览器之后被还原，我们强行限制状态对象的大小为640k。如果你向pushState()方法传递了一个超过该限额的状态对象，该方法会抛出异常。如果你需要存储很大的数据，建议使用sessionStorage或localStorage。

标题（title）： FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。

地址（URL）： 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。

注意：history.pushState()方法和history.replaceState()方法跳转是不可以跨域的！！

说明onpopstate和onhashchange？

popstate事件

每当激活的历史记录发生变化时，都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建，或是被replaceState方法影响到的，popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。

如：http://www.example.com/test.htm。改变成 http://www.example.com/index.html。

hashchange事件

当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发。

如：http://www.example.com/test.htm#part1 - 这个 URL 中的锚部分为 #part1。改变成 #part2就会触发。

其中url的记录有点区别，hashchange记录触发前后的url，而popstate.state着记录history.pushState()方法和history.replaceState()执行前的url。这个有所区别。用起来要按需使用。

Feature	URL
hashchange.newURL	当前URL
hashchange.oldURL	上一个URL
popstate.state	保存state当前URL

浏览器兼容性表：

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
replaceState, pushState	5	4.0 (2.0)	10	11.50	5.0
history.state	18	4.0 (2.0)	10	11.50	6.0
hashchange	5.0	3.6 (1.9.2) Firefox 6 中加入对 `oldURL`/`newURL` 属性的支持.	8.0	10.6	5.0

JarunWang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用pushState写一个router

日常我们使用着各种的router.BACKBONE-router,REACT-router等。但就几个页面的小项目，还要引用这些大型工具。就觉得特别麻烦。能有一种简便的，几行代码就能实现的router。能。HTML5里引用了新的API，history.pushState和history.replaceState，就是通过这个接口做到无刷新改变页面URL的。
复制链接

扫一扫