Posts Tagged ‘Browser-History’
上次一位网友在我blog留言问到如何修正Ajax后退失效，这是在开发Ajax应用时很常见的需求。这篇文章就简单的介绍一下怎么解决这个问题。
首先我们要清楚后退按钮会失效的原因：使用Ajax时，页面通过XMLHttpRequest来更新内容，并没有Redirect，所以浏览器不会出现前进后退。这也是Ajax刚出来时遭到很多人批判的一个原因，其中细节可以参考这两篇文章《Ajax: 99% Bad》、《AJAX的七宗罪》。这个问题其实跟Ajax无关，不过Ajax的出现使得一个页面实现无刷新更新更容易，这个时候人们开始意识到，一个页面发生巨大改变而不能后退是一件很痛苦的事情。
要解决这个问题，就要控制浏览器的history，在页面发生改变时往浏览器历史里插入一条记录。但是出于安全的目的，JS是不能直接操作history的。我们必须采用其他方法：IE中，在页面中插入一个隐藏的iframe，通过改变iframe的location或者DOM，都可以在主窗口的history中产生新记录，详细研究可以参考这篇文章；在其他浏览器(Firefox、Opera、Safari)中没有这么复杂，只需改变url就可以产生一条新的history记录，当然url不能乱改，要不页面就跳转走了，通常我们改变的是location.hash，也就是url“#”以后的部分。下面是具体实现：
首先在页面中放一个隐藏的iframe：
<style type="text/css" title="default" media="screen">
#history_iframe{position:absolute;top:0; left:0;width:1px; height:1px;visibility:hidden}
</style>
<iframe id="history_iframe" src="blank.html"></iframe> blank.html的内容也很简单，放了一个div来存当前的hash：
<html> <head><title>hack iframe</title></head> <body><div id="state"></div></body> </html>
对不同浏览器采用不同方法控制history：
var isIE = typeof(window.opera)!="object"&&window.navigator.userAgent.indexOf("MSIE")>0;
var $ = function(s){return document.getElementById(s)};
function update_status(str){
if(isIE){
try{
var doc = $("history_iframe").contentWindow.document;
doc.open();
doc.write('<html><body><div id="state">'+str+'</div></body></html>');
doc.close();
}catch(e){}
}
location.hash = str;
}; 可以测试一下了：
<button onclick="update_status('test1')" >test1</button>
<button onclick="update_status('test2')" >test2</button>
<button onclick="update_status('test3')" >test3</button> 上面就是控制浏览器history的基本原理，通过点击三个按钮，会往浏览器写入三条历史记录，这样尽管页面依旧没有刷新，但是浏览器的前进后退却能开始工作了。剩下的工作很简单：利用一个定时器不停的检测状态是否发生变化（IE检测iframe里state的innerText；其他浏览器检测location.hash），然后在检测到状态改变时调用相应的方法还原页面内容。限于篇幅，这一部分代码就不贴出来了。完整的实例在这里。
本文链接：http://www.imququ.com/post/55.html
--EOF--
- No Comments
- Tags: Ajax, Browser-History
以前在测试自己写的webim时发现firefox有一个很人性化的特性：在页面上跟别人聊天的时候如果不小心点到了本页打开的链接，只要点一下Firefox的后退按钮，就会退后到之前的页面，可以接着聊。也就是说在firefox中点击后退，原来页面的状态会还原，包括JS改变的DOM结构也会保持。
我们用下面的代码来测试一些常见的浏览器是怎么处理后退的。测试的浏览器有IE8beta2、Firefox3.0.1、Flock1.2.4(Firefox2.0.0.16内核)、Safari3.1(window版)、Opera9.60。
<a href="http://www.baidu.com">百度</a>
<div id="a1"></div>
<script type="text/javascript">
window.onload = function(){
alert("load");
var i = 1;
setInterval(function(){
document.getElementById("a1").innerHTML = i ;
},500);
};
</script> 测试结果：IE8点后退时会触发之前页面的window.onload事件，计数器回到初始状态重新计数；Opera9.6后退时不会触发前一个页面的window.onload事件，但定时器停止运行；其它浏览器后退时都不会触发前一个页面的window.onload事件，定时器会接着之前的状态继续计数。
结论：Firefox、Opera、Safari在这方面都做得比较人性化，完全的保留了页面unload时的状态，估计是直接从内存中读取缓存数据，所以后退速度相当快；其中Opera9.6会导致计数器停止，可能是个bug。IE在后退时则会回到最初状态，之前JS改变的DOM不复存在。
如果想让非IE浏览器退后时也能触发window.onload事件呢？这篇文章提到了解决方案。其实就是在页面是加入：
window.onunload = function(){}; 经测试，此方法可行。对于其中的原理，JK给出了如下解释：
FF／Safari等会努力做得很理想（完完全全的保持上次的unload时的信息），不过，如果他认为用户的代码（典型的是在onunload里）会破坏他的理想计划时，他就退一步，把“后退”当作“后退＋reload”。
本文链接：http://www.imququ.com/post/48.html
--EOF--
- No Comments
- Tags: Browser-History
- Entries (RSS)
- PPanda sftp如何同步本地文件夹呢？
- dron 嗯！太有用了，终于完美找回 EditPlus 的感觉了。
- 袁源 还真的是这样。其实挺佩服微软的呀～就是都太不完善了
- 三水清 类似功能可以使用fiddler，http://ming.sinaapp.com/?p=218
- 呆呆 非常感谢~话说我现在想把weinre变成一个服务器，就是我在电脑上修改了，手机上访问可以直接，不知道[...]
- 夜 困扰了我好几天的问题，不过最后还是让我解决了，要早让我看见这个文章该多好啊，那我也不用烦恼那么久了~[...]
- hoowolf 非常感谢你的工作！！！
- welefen 恩，去年我们在新首页导航精准下线的时候也遇到过，当时还做了对用户影响的数据评估和分析。
- 唠叨下 我们这边测试的时候是在刚做完 preload 后的系统上测试的，就跟刚装完操作系统后一样干净。怎么说[...]
- gust 我是在ubuntu11.10环境下
- gust 想用google浏览器的话可以这样 webbrowser.get('/usr/bin/google[...]
- jin 怎么zenCoding的缩写设置呢，类似editplus下的acp配置
- Jerry Qu @Feather，确实Shadow是基于Weinre封装的。在我这里也很慢，因为它连的是http:/[...]
- Feather 谢谢分享，其实Adobe的Shadow产品貌似也是用这个原理来做的，不过shadow封装好，比较方便[...]
- i am bug 感谢屈屈！