BlogJava-govo-文章分类-Prototype.jshttp://www.blogjava.net/govo/category/14973.htmlzh-cnWed, 28 Feb 2007 03:47:59 GMTWed, 28 Feb 2007 03:47:59 GMT60当prototype-window class 遇上Really Simple History(RSH)http://www.blogjava.net/govo/articles/68405.htmlgovogovoThu, 07 Sep 2006 17:42:00 GMThttp://www.blogjava.net/govo/articles/68405.htmlhttp://www.blogjava.net/govo/comments/68405.htmlhttp://www.blogjava.net/govo/articles/68405.html#Feedback0http://www.blogjava.net/govo/comments/commentRss/68405.htmlhttp://www.blogjava.net/govo/services/trackbacks/68405.htmlprototype window class 组件window.js做网页内浮动窗口，用RSH的dhtmlHistory.js做浏览器历史激活，但在IE上两者有冲突。经过我对 dhtmlHistory.js一天的研究，疯狂的alert，终于查出，原来是window.historyStorage.init()生成的form有问题。
　　我用的浏览器有Firefox1.5，Opera9和IE7b2，现在的问题主要针对IE7b2,个人认为IE6和7没本质的区别，所以应该也能在IE6上运行。

我们来看看dhtmlHistory.js，在566行左右，有如下定义：
 1var styleValue = "position: absolute; top: -1000px; left: -1000px;";     
 2var newContent =
 3         "<form id='historyStorageForm' " 
 4               + "method='GET' "
 5               + "style='" + styleValue + "'>"
 6            + "<textarea id='historyStorageField' "
 7                      + "style='" + styleValue + "'"
 8                      + "name='historyStorageField'></textarea>"
 9         + "</form>";
10 document.write(newContent);

用于生成如下语句：
1<form id='historyStorageForm' method='GET' style='position: absolute; top: -1000px; left: -1000px;'>
2<textarea id='historyStorageField' style='position: absolute; top: -1000px; left: -1000px;' name='historyStorageField'></textarea>
3</form>

生成这个form主要是为了让页面在加载时保存历史记录状态，下面是引自dhtmlHistory.js的一段注释，偶的E文不好，各位自己看啊：
/** An object that uses a hidden form to store history state
    across page loads. The chief mechanism for doing so is using
    the fact that browser's save the text in form data for the
    life of the browser and cache, which means the text is still
    there when the user navigates back to the page. See
    http://codinginparadise.org/weblog/2005/08/ajax-tutorial-saving-session-across.html
    for full details. */

　　如果你没有用到prototype window class 组件的window.js（v0.85）做窗口浮动，你会很好的运行它，事实上，用了window.js，RSH也能很好的工作 ，只是window.js不工作了。:)
其实生成的form看上去也是没什么问题的，只是不知道为何它有魔力可以让window.js不工作，但直接写到HTML而不是通过 document.write生成的话是没问题的。可能是document.write的工作方式问题吧:)  document.write方法一般放在<head>标签前，那么在运行的时候它就可以在<body>标签面的第一句写上东西了，如果放在<body>内或者让页面onload完再用，那么很不幸，<body>里面的东西全被替换了（嘿嘿，可以用 firefox的firebug扩展看到运行后的内容）。说回dhtmlHistory.js，在结尾部分，有这样一句：
1/** Initialize all of our objects now. */
2window.historyStorage.init();

以把这个form写到页面中。
　　很奇怪，通过document.write生成的form也不全有问题，只是form标签内对style的设置有问题，只要把 + "style='" + styleValue + "'>"去掉就可以了！因为水平有限，所以我左思右想也不懂为何，没能说出原由。
　　现在，我重新写了一段代码：
1var newContent =
2         "<div style='" + styleValue + "'><form id='historyStorageForm'>"
3            + "<textarea id='historyStorageField' name='historyStorageField'></textarea>"
4         + "</form></div>";

我想这样组织HTML会更好，让form更干净。其实dhtmlHistory.js源码的很多地方都应能被修改得更好。如果应用到实际中，认真看看源码并改改它会好点。
　　
　　另外提醒想对类似RSH这样通过iframe激活IE历史记录的朋友，如果你想测试，一定要通过运行服务的方式来浏览页面，否则会出错也得不到你最终的效果。因为直接通过IE来打开你的HTML文件，IE会对iframe的访问有限制，请大家小心。

　　本从水平有限，有错误之处，还请请各位指正，谢谢。


附：
RSH的主页：http://www.codinginparadise.org/projects/dhtml_history/README.html
prototype-window的主页： http://prototype-window.xilinus.com/
本文例子源码：
[点击下载]

后记：此文早在别处的BLOG和论坛发过，可惜没有人参与讨论，不知是自己文笔问题还是太基础。但既然是自己写的，当然可以收回来啦。

govo 2006-09-08 01:42 发表评论
]]>