iframe记录历史记录(onhashchange)

最新推荐文章于 2024-02-22 10:52:02 发布

smiky

最新推荐文章于 2024-02-22 10:52:02 发布

阅读量1.3k

点赞数

分类专栏： onhashchange笔记文章标签： json javascript ViewUI

本文链接：https://blog.csdn.net/smiky/article/details/84465076

版权

onhashchange笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在富客户端页面中，加载一个新的页面是不需要刷新页面的，此时window.history.back()即点回退按钮是不会返回来初始页面的。因此，需要将新加载的页面(通常是ajax加载)记录下来，同时要让history.back生效。

原理很简单，在window内部的子window(如iframe)的history发生变化时点回退接钮时会对子window回退。

因此，可以在window内部，加上一个隐藏的iframe,通过改变这个iframe的history实现点回退时界面的回退。

window有个onhashchange事件，即window.location.hash发生变化时会触发，因此，可以将要加载的页面放置到location.hash上面，这样在点回退时根据此hash回退到过去的页面

当然也可以用一个栈来记录详细的参数，页hash对应一个key值，在onhashchange时根据key取出对应的参数来加载历史页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>backbone practise</title>
<script type="text/javascript" src="../vendor/jquery.js"></script>
<script type="text/javascript" src="../vendor/json2.js"></script>
<script type="text/javascript" src="../vendor/underscore.js"></script>
<script type="text/javascript" src="../vendor/backbone.js"></script>
<script type="text/javascript" src="router.js"></script>
</head>
<body οnlοad="ready();">
    <a href="#help">help</a>
    <a href="#search">search</a>
    <iframe name="abc" id="abc" style="width:400px;height:400px;" src="backbone.html"></iframe>
</body>
</html>
<script type="text/javascript">
function ready(){
	//window内部的子window的hash变化会影响 window.location的前进与后退
	//因此，想不刷新页面情况下记录历史记录(如ajax请求了一个页面，可以用iframe来记录这个页面)，
	//可以在主window上加个iframe,用它来记录加载的页面，那么
	//window.history.back会触发子window的onhaschange事件
	$('a').click(function(){

		//两种方式会触发onhashchange,a)location.hash改变 2)location.href改变,改变href时#后面的内容要改变
		//iframe.src不会触发onhashchange
		//hash通常指的是backbone.html#defabc指的是url中#及后面的内容
		
		//第一种情况
		//location.href只针对src不变#后面的内容变时才会触发onhashchange,iframe.html不是当前页面，onhashchange不触发
        //window.abc.location.href = 'iframe.html#'+Math.random();
        //window.abc.location.href = '#'+Math.random();
        
        //第二种情况
        window.abc.location.hash = Math.random();
    });
    window.abc.onhashchange = function( arguments ){
        console.log(window.abc.location.hash);
    }
	
}
</script>

符件是一个简单的实现

window.onpopstate事件也可以处理回退，而且比onhashchange方式更简单，连iframe都不用要了,具体参考这里

https://developer.mozilla.org/en-US/docs/Web/API/Window.onpopstate

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}