修补AJAX应用中Back/Forward Button和Bookmark失效的问题
2006-09-14 19:48
309 查看
想法与目标
从AJAX诞生至今，就存在着Back/Forward Button和bookmark失效的问题，我以前一般提倡，一个好的AJAX应用应该不让用户有点击“Back/Forward”的想法，并且使用某种方式提供给用户一个能够记录直接产生页面的Bookmark。Windows Live Local应该是这种应用最好的典范之一，其灵活的交互，良好的界面让我在初遇时不得不眼前一亮。
另外，我也曾经见过把后退按钮禁用的做法（其实这样对于解决问题的确不错），不过这些都似乎只是一个workaround，设法避开这个AJAX应用普遍存在的问题。似乎Gmail能够支持Back按钮，但是我惊奇的发现，在点击Back后，却不能使用Forward，所以这还不算成功的解决这个问题。那么能否解决？似乎已经有了一定的实现。
事实上，之所以我会产生实现自己的解决方案的想法，是因为从Nikhil Kothari的Blog上看到了他的解决方案（点击这里查看）。他实现了一个HistoryControl控件，可以在页面中配合UpdatePanel使用，在一定程度上实现了对Back/Forword Button已经Bookmark的支持。但是正如他在Blog上所说的，这只是他的一个prototype。我在使用了他的演示之后，也的确发现了一些问题（演示也能从Nikhil的Blog上下载）：
HistoryControl是一个Server控件，必须配合UpdatePanel使用，并没有对于Atlas的客户端应用甚至普通的AJAX应用提供基本的支持。
不支持FireFox（不知为何，我在自己尝试之后觉得支持FireFox比IE容易实现）。
在IE里使用时，从Back和Forward的下拉框里可以看出，那些Title都成为了“Empty Page”。
不支持在Back和Forward下拉框中选择一项History跳转。
如果访问了别的站点再Back，则在IE下不支持多次回退。
部署麻烦。事实上我觉得很奇怪，我除了直接在他的项目中成功运行之外。部署到别的项目或者是我的空间都有问题，怎么也找不出原因，估计是文件路径问题，需要仔细读一下他的代码。
总之，这个解决方案还很不成熟，但是我们要对Nikhil，Atlas和微软有信心，对于Back/Forward的内置支持应该会出现在Atlas的后续版本中。
于是我想，不如我来实现一个自己的吧，虽然我一直提倡软件复用，但是如果找不到成熟的解决方案，那么就该发挥程序员的主观能动性了。对于我最后的实现，它有以下特点：
一个轻量级的JS解决方案。虽然我是在Atlas的基础上写的，但是只是使用了Atlas中的Sys.Timer类，很容易修改成独立于任何库的JS代码。
支持IE和FireFox。
简单的支持Back和Forward的下拉框里的Title文字，在大多数情况下不会出错。产生Nikhil的这个问题的原因在阐述我的实现时会提及。我简单地解决了这个问题，但是没有设计出完整支持title问题的完美实现。我有一些想法，似乎十分复杂，在尝试时都宣告失败。
支持在Back和Forword下拉框中选择一项History跳转。
支持Bookmark，用户可以轻松将页面加入收藏夹。
易于使用，部署简单。
对于我列出Nikhil的实现里的第5个问题，我想了一些办法，却依旧没有解决。现在虽然脑子里有想法，但还需要继续尝试。
思路与设计
AJAX是个神奇的东西。因为有了XMLHttpRequest对象，我们能够“不知不觉”地与服务器端交换数据，在改变页面显示和行为的同时，让用户感觉不到页面的Reload。虽然在上个世纪微软已经在早期IE里就以ActiveX的形式提供了这个对象，并且在OWA中将其进行大量使用，但是我对于这个对象的了解却在AJAX大行其道之后。在这之前，为了达到类似AJAX的良好用户体验，往往会在页面中放一个隐藏的IFrame，然后通过Form向其中POST/GET数据，或者直接修改IFrame的src属性以达到传输数据的效果。如果在IFrame中的页面里写JS代码，就能通过window.parent.XXX来调用父级页面的对象或方法，并可以访问整个DOM（当然跨Frame操作的话需要两张页面在同一个Domain中，这个就是IFrame sandbox，如果了解Windows Live Gadget和Windows Live Spaces Gadget的人就能体会到在安全性方便IFrame起的重要作用）。
当时发现，只要改变IFrame里的地址，不论是POST/GET还是改变其src属性，大都会在浏览器的History里留下痕迹。这是如果用户点击浏览器的Back按钮，则会从IFrame里的History里Load以前的页面，当然也会按照那张页面的逻辑解释执行其中的JS代码。善于利用这点的话，就会产生父页面Back/Forward的效果。可惜当时没有去想这一点，而且当时因为某些问题，用户点击Back/Forward时反而会产生异常的行为，甚是麻烦。
与POST/GET相比，改变IFrame的src属性相对简单，也容易操作。但是在IE重要注意的是，并不是任意修改src时都会使IFrame被加入History。修改src的时候其实改变了IFrame里的location。location是window的一个属性，它分几个部分，这里需要提到的就是它的href，search和hash。举个例子，对于一个location“http://www.sample.com?a=b&c=d#hello”来说，location.href是“http://www.sample.com”，location.search是“?a=b&c=d”（可以看出，search其实就是Query String），location.hash是“#hello”。在IE中改变location.hash是不会影响History的，因此只有改变href与search才行。在FireFox中，改变hash值是可以影响浏览器的History，但是点击Back/Forward并不会使浏览器重新执行页面中的JS代码。
解决Back/Forward的大致方向有了，那么Bookmark呢？应该很容易将问题变成，如何要改变浏览器地址栏的值，但是不刷新页面。还好我们有hash。所有的标识都要通过hash值来传递。
到现在为止，应该已经能够实现了在不刷新页面时改变浏览器的History纪录，但是如何在用户点击Back/Forward的时候也改变页面内容呢？我们将这个问题分为两部分考虑，依次解决：
在用户点击浏览器的Back/Forward或者选择History中某一项时改变浏览器的地址栏信息。
根据地址栏信息的改变得到信息，然后修改页面的内容。
对于第1个问题，在FireFox下很容易解决，因为其实这是浏览器已经支持的功能。如果是IE，我们只能通过IFrame里的页面来改变父窗口的hash了。第2个问题比较麻烦，因为改变浏览器的hash值并不会触发一个事件，所以迄今为止似乎所有的解决方案都是使用timer来不停地查询hash值有没有改变。我的解决方案也不例外。
解释完了思路与设计，就该转向真正的实现了吧。
实现与分析
在分析实现之前，可以先点击这里下载我的代码，或者点击这里查看例子。我实现了一个类“Jeffz.Framework.History”。先从使用讲起。
Default.aspx
1
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5</script>
8
9<html xmlns="http://www.w3.org/1999/xhtml" >
10<head runat="server">
11 <title>Nav Fix</title>
12</head>
51<body style="font-family: Arial;">
52 <form id="form1" runat="server">
53 <div>
54 <atlas:ScriptManager ID="ScriptManager1" runat="server" EnableScriptComponents="true">
55 </atlas:ScriptManager>
59
60
68 <select onchange="onChange(this)" id="select">
69 <option></option>
70 <option value="1">selection 1</option>
71 <option value="2">selection 2</option>
72 <option value="3">selection 3</option>
73 </select>
74 <div id="message" style="font-size: 32px;"></div>
75 </div>
76 </form>
77</body>
78</html>
79
Selection.ashx
1<%@ WebHandler Language="C#" Class="Selection" %>
2
3using System;
4using System.Web;
5
6Jeffz.Framework.History = function(setDataCallback, helperPageUrl)
2Jeffz.Framework.History.prototype.__reloadHelperIFrame = function(hash)
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" >
3<head>
4 <title>Untitled Page</title>
5</head>
6<body>
7</body>
15</html>
把__reloadHelperIFrame函数和NavFixHelper.htm页面同时分析，是因为它们两个有密不可分的关系。它们都是仅仅为了IE服务的。
在前面的解释里，我已经谈到了改变iframe的Query String（search）可以将状态添加至浏览器的History中。于是__reloadHelperIFrame函数保证了新加载的Query String，和当前IFrame里页面的Query String不同（如果当前src包含了“&true”字符，那么就加载包含“&false”的地址，否则就加载包含“&false”的地址）。接着在新加载的NavFixHelper.htm页面中，会将父窗口的hash变成自己的hash。这样，浏览器地址栏里的值就会改变了。这样，当浏览器的Back/Forward Button被点击，或者用户直接从History列表里选择一项时，IFrame里的页面会被重新加载，并且会使用特定的地址，页面的JS代码会被重新执行，最终又将影响浏览器地址栏里的hash值。不过由于如果访问了其他页面，History只能记住最后一次IFrame里的地址，所以无法使用Back多次回退了。
每次加入History项，或者重新访问History时，都须要重新加载一次NavFixHelper.htm，那么会不会影响性能？答案是否定的。首先在加入History时，使用的href+search值只会用两种，因此浏览器会帮助cache文件内容，第二次访问具有相同href+search的页面时浏览器将不再访问Server。而且在服务器端，对于这样的静态文件，也会尽可能的进行cache，所以即使访问了Server也会获得304（未改变，表示从缓存读取）信息，而不会从服务器端重新下载。再退一步，重新下载一个如此之小的文件，也不会对性能有多少影响。
可以发现，在加载IFrame的页面时，还将当前页面的Title传入了Query String。其作用就是避免Nikhil的解决方案中我举出的第三个问题。NavFixHelper.htm会根据地址栏信息修改自身的titile，这样在IE添加History项时，会纪录IFrame里页面的title，这样就保证了浏览器History列表里的title与浏览器页面相同。可是这样还没有完美的解决Title问题，如果用户想要修改页面的Title，IE里我有了解决方案，却始终还没有找出在FireFox下正确纪录的方法，总是在Back/Forward之中History里的title就混乱了，似乎在FireFox里Forword/Back记录title的行为和IE不一样，让我百思不得其解。
History.js - addHistory
1Jeffz.Framework.History.prototype.addHistory = function(context)
2Jeffz.Framework.History.prototype.start = function()
2
22Jeffz.Framework.History.prototype.stop = function()
23Jeffz.Framework.History.prototype.__onTimerTick = function(sender, eventArgs)
2Jeffz.Framework.History.prototype.__execute = function(hash)
2{
3
var historyEntry = null;
4
5
try
6
{
7
var historyEntry = Sys.Serialization.JSON.deserialize(decodeURI(hash.substring(1)));
8
}
9
catch(e)
10
{
11
this.__setDataCallback(null);
12
return;
13
}
14
15
if (historyEntry)
16
{
17
this.__setDataCallback(historyEntry.__p__);
18
}
19
else
20
{
21
this.__setDataCallback(null);
22
}
23
}
这段我想就不用多加解释了，似乎将一个简单的调用写得有些复杂。这样做的目的是在hash值是错误的情况下，会将null作为参数，保证了用户提供的回调函数被正确的使用。
问题与其他
就此，整个类分析完了，总共只有短短一百多行代码，是我参考了一些实现，并通过自己的经验与思考得出的解决方案。目前似乎关于解决AJAX这个问题的解决方案都有差不多的模式，也有差不多的障碍。这依旧不是一个完美的解决方案，依旧有改进的余地。其实我这篇东西的作用只是抛砖引玉，希望能引出更多优秀的见解。我仍然在钻研和实践中，如果有什么进展，我会第一时间的更新这里的blog。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 修补AJAX应用中Back/Forward Button和Bookmark失效的问题
- 修补AJAX应用中Back/Forward Button和Bookmark失效的问题
- 关于验证码的首次加载失效问题
- 解决百度分享链接不存在或失效的问题
- 移动端 position:fixed失效问题
- Struts/Servlet，action转到jsp后，CSS失效，路径问题（struts2，jsp路径，action路径，action跳转，相对路径，绝对路径）
- IE下JS文件失效问题总结
- Android中解决EditText放到popupWindow中，原有复制、粘贴、全选、选择功能失效问题
- Xcode 全局搜索失效的问题
- dataGridView设置行列不可用 失效问题
- listview中的item布局跟标签宽高设置失效的问题
- 360/IE兼容模式下。append 失效，ajax返回json，传值为0问题
- 解决Nginx下ThinkPHP框架中的U方法失效问题
- 迭代器失效问题——小心使用erase()
- ORA-00054:资源正忙,但指定以NOWAIT方式获取资源,或者超时失效的问题
- 关于淘宝开放平台API的session失效问题解决
- android:scaleType设置失效的问题解决
- 解决数据库字段导致的下拉列表回显失效问题
- android ExpandableListView setOnGroupClickListener失效问题
- Android RadioButton用代码去圆点失效的问题解决