javascript/ajax浏览器历史记录后退解决方案II
使用iframe,通过修改iframe.src产生历史
示例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>0</title> </head> <body> <input type="button" value="加1" onclick="add()" /> <div id="info" style="border:red 1px solid;width:200px;padding:10px;margin:5px;">0</div> </body> </html> <script> /** * history.js v0.2 * Copyright (c) 2011 snandy * * 1 使用iframe,通过修改iframe.src产生历史 * 2 IE6/7/8/9/10/Firefox/Safari/Chrome/Opera 都支持 * */ History = function() { var iframe, // 存储历史记录 list = [], // 历史记录索引 index = 0, pushing; iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.onload = function() { if(pushing) return; var url= this.contentWindow.location.href; if(url.indexOf('?')>-1) { var idx = url.substr(url.indexOf('?')+1); get(idx); } } document.body.appendChild(iframe); function push(data) { if(typeof data !== 'object') return; if(typeof data.param == undefined || typeof data.func !== 'function') return; list[index] = data; updateIframe(); pushing = true; index++; setTimeout(function(){ pushing = false; }, 100); } function updateIframe() { iframe.src = 'blank.html?' + index; } function get(idx) { var item, param, func, scope; if(idx != index) { item = list[idx]; if(item) { param = item.param; func = item.func; scope = item.scope; func.call(scope, param); } } } return { push : push }; }(); </script> <script> var info = document.getElementById('info'); var i = 1; function add() { info.innerHTML = i; document.title = i; var data = { param : i, func : func }; History.push(data); i++; } History.push({param:0, func: func}); function func(i) { info.innerHTML = i; document.title = i; } </script>
上一篇javascript/ajax浏览器历史记录后退解决方案I,多了个blank.html,是一个空html架子,没有JS逻辑代码,如下
<!DOCTYPE HTML> <html> <head> <title>blank.html</title> </head> <body> </body> </html>
每次ajax操作会往iframe.src的问号后附加一个数字以记录历史。点击后退按钮,iframe的onload事件中获取iframe的url,根据问号后的数字去取记录。
所有浏览器均支持该方式。缺点是如果主页面中存在其它iframe,且修改了其src。历史管理会混乱。
来源:http://www.cnblogs.com/snandy/archive/2011/09/19/2180570.html
加支付宝好友偷能量挖...