在富客户端页面中，加载一个新的页面是不需要刷新页面的，此时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 onload="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}
相关推荐
在这个函数中，使用`pushState`方法添加一个新的历史记录，以覆盖用户试图返回的状态，并使用`forward`方法确保用户无法通过浏览器的后退按钮回到前一个状态。 3. **兼容不支持HTML5 History API的浏览器**：对于不...
然而，由于AJAX请求不会触发浏览器的前进和后退按钮（历史记录）更新，用户在使用这些功能时可能会遇到问题。本文将深入探讨如何处理AJAX前进后退的问题，主要涉及`hash`技术的应用。 `hash`是URL中的井号(#)后面的...
`replaceState`与`pushState`相似，不同之处在于它不会在历史记录中增加新的条目，而是替换当前的历史记录点。这对于更新当前页面的URL或状态对象而不留下新的历史记录条目非常有用。 为了监听URL的变化，可以使用`...
例如，使用`history.pushState()`或`history.replaceState()`方法，将数据以状态对象的形式添加到历史记录中，然后在其他页面中通过`window.onpopstate`事件监听状态变化。 6. URL fragment identifier (hash): ...
这两个方法允许我们对浏览器历史记录进行管理，能够控制浏览器历史记录栈中的记录。 ```javascript history.pushState({color:'red'}, 'red', 'red'); window.onpopstate = function(event) { console.log(event....
例如，AJAX技术无法改变浏览器的历史记录状态，这意味着用户在使用浏览器的前进和后退按钮时，无法正确地浏览之前通过AJAX加载的页面内容。当用户刷新页面时，可能会返回到初始页面，而不是之前浏览的页面，导致用户...
然而，AJAX请求并不改变浏览器的URL地址栏中的地址，导致浏览器的历史记录栈中不会记录AJAX请求的页面状态。因此，当用户尝试使用浏览器的前进或后退按钮时，浏览器无法响应这些请求，而是直接跳转到上一个或下一个...
通过指定更改规则并为其分配回调，可以轻松地在各种浏览器中处理hashchange事件的库。 内置了对基于Ajax的规则的自动AJAX调用的支持。 支持IE7 +，Chrome 6 +，Safari，Opera 10.6+和FF3.6 +。 没有依赖关系。
1. `length`属性：它返回浏览器历史记录中的URL数量，但出于隐私考虑，并不显示URL的具体内容。 2. `state`属性：与当前URL相关联的一个对象，我们可以通过pushState方法和replaceState方法来添加或修改该对象。 ...
-JavaScript中的路由设置包括库和jquery.routes.js文件。<... </ script >< script type =" text/javascript " src =" jquery.routes.js " > </ script > IE 9及以下jQuery路由现在在Date对象上...
- `window.onpopstate`事件会在用户在历史记录中前进或后退时触发。 - **服务端配置说明**： 在history模式下，如果用户直接通过URL访问应用中的某个路由，服务器端应返回统一的页面（通常是入口文件，如index....
- `history.go(index)`: 跳转到指定历史记录，`index` 可以是正数、负数或零，表示相对于当前位置的偏移量。 监听 `popstate` 事件可以捕获由 `back()`, `forward()`, `go()` 产生的路由变化： ```javascript ...
window.onhashchange = function() { console.log(window.location.hash.substr(1)); // 输出传入的数据 }; ``` 综上所述，解决跨域问题的方法多样，每种方法都有其适用场景和局限性。在实际开发中，应根据项目...
设置时，会创建一条新的访问历史记录，而不会刷新页面。 六、`onhashchange`事件 HTML5引入了`onhashchange`事件，当`window.location.hash`的值发生变化时，该事件会被触发。现代浏览器（如IE8+、Firefox 3.6+、...
2. 嵌入式框架（iframe）通信：通过哈希值传递信息，可以在不同的框架之间进行通信。 3. 书签功能：哈希可以用来存储用户当前的状态，例如在长列表中的滚动位置，用户可以通过书签快速回到之前的位置。 五、注意...
此外，在浏览器的前进和后退操作时，由于历史记录的改变，如果没有合理的数据缓存机制，可能会导致数据的重新请求。 综上所述，前端路由通过页面不刷新的特性，改善了用户体验，简化了服务器的请求处理，同时为前后...
在 hash 模式下，浏览器的前进和后退按钮也能正常工作，因为每次 hash 变化都被记录在浏览器的历史记录中。虽然 URL 显示了 `#` 符号，但实际请求中不会包含这部分，所以不会引起服务器端的重载。 **二、history...
在主流的浏览器(IE firefox)里面 都有一个 onhashchange 的事件监听 fragment 的变化。 但是，他们的行为有些差异。在IE8 以前的 IE版本里面，当 [removed] 对象迅速变化的情况下，onhashchange 不会触发，非常奇怪...
在传统的网页浏览中，用户可以通过点击浏览器的前进和后退按钮来浏览历史记录，每刷新一次页面，URL就会更新以反映当前的状态。但在使用AJAX的网页中，由于页面内容是动态加载的，URL可能不会随着用户交互而改变，...