如何配合IE的地址栏记录用户操作历史
原文发表在 http://www.blogjava.net/emu/archive/2006/03/03/33518.html
Ajax七宗罪第五宗里面，作者讽刺Ajax需要一个“没有back和history的浏览器”。很讽刺吗？只是作者这么想罢了。至少要让Ajax应用支持Forward和Back，并不需要什么了不起的技术，我们也不需要这样的浏览器来改变用户习惯，事实上我们完全能做到让Forward和Back更酷。
这是一个示范页面：
index.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> emu's ajax bac,/forward sample </TITLE>
<META NAME="Author" CONTENT="emu">
<META NAME="Keywords" CONTENT="ajax history">
<META NAME="Description" CONTENT="这个例子演示了如何不跳转页面而配合IE的前进、后退按钮记录用户交互历史">
</HEAD>
<BODY>
<textarea cols=80 rows=30 id=t onkeypress="checkSave()">请在此处输入</textarea>
<iframe name=historyFrame width=0 height=0 src="hiddenpage.htm?0#0"></iframe>
<SCRIPT LANGUAGE="JavaScript">
<!--
historyFrame.history.go(-999)
var maxHistory=100;
var historyList=[];
var historyOffset=0;
var timer;
function checkSave(){
if(timer)clearTimeout(timer);
timer=setTimeout(saveHistory,500);
}
function saveHistory(){
if(t.value==t.oldValue) return;
historyList[historyOffset]=t.oldValue;
historyOffset++;
historyList.length=historyOffset
t.oldValue=t.value;
var url = historyFrame.location.protocol+"//"+historyFrame.location.pathname+"?";
historyFrame.location=url+historyOffset+"#"+historyOffset;
t.focus();
}
function gotoHistory(n){
if(n<historyOffset){
historyList[historyOffset]=t.value;
}else if(n>historyOffset){
}else return;
historyOffset=n;
t.value=historyList[historyOffset];
t.focus();
}
window.onload=function(){
t.oldValue=t.value;
}
//-->
</SCRIPT>
</BODY>
</HTML>
需要一个简单的页面放在同一目录下面：
hiddenpage.htm
<HTML>
<BODY onload="gotoHistory()">
<SCRIPT>
function gotoHistory(){
parent.gotoHistory(location.search.substr(1))
}
</SCRIPT>
</BODY>
</HTML>
好了，打开index页面，在文本区域里面做一些输入，然后试试IE的前进和后退按钮能提供多酷的功能。
这个方法由emu的好朋友twinson首先提出来，以后我们就叫它twinson方法吧。
全部原码点击这里下载:http://www.blogjava.net/Files/emu/ajax%20history.zip
问题点数：1、回复次数：2Top
1 楼hax（海曦）回复于 2006-03-03 20:32:49 得分 0
这个方法有个缺陷，虽然解决了history问题，但是没有解决bookmark问题。Top
2 楼emu（月亮不在手指尖上）回复于 2006-03-06 00:06:14 得分 0
嗯，果然是行家。
bookmark问题的解决要通过提供静态链接，和history的解决完全是两个方面。两个问题被摆到一起来置疑Ajax，只能说置疑Ajax的人并不明白在Ajax世界有些游戏规则已经不同从前了。
通过被你称为的query的技术，静态链接的提供并不为难，但是会造成静态页面重复加载的问题，确实我现在也还没有很好的解决方案。但是这个问题也不应该成为置疑Ajax的理由，因为在旧的Web模式下这些链接本来也是表现为不同的url需要被重复加载的，可以说Ajax也是受到旧模式的拖累。Top
