當prototype-window class 遇上Really Simple History(RSH)
Posted on 2006-09-08 01:42 govo 閱讀(665) 評論(1) 編輯 收藏 所屬分類: Prototype.js前天用了prototype 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行左右,有如下定義:
用于生成如下語句:
生成這個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,在結尾部分,有這樣一句:
以把這個form寫到頁面中。
很奇怪,通過document.write生成的form也不全有問題,只是form標簽內對style的設置有問題,只要把 + "style='" + styleValue + "'>"去掉就可以了!因為水平有限,所以我左思右想也不懂為何,沒能說出原由。
現在,我重新寫了一段代碼:
我想這樣組織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和論壇發過,可惜沒有人參與討論,不知是自己文筆問題還是太基礎。但既然是自己寫的,當然可以收回來啦。
我用的瀏覽器有Firefox1.5,Opera9和IE7b2,現在的問題主要針對IE7b2,個人認為IE6和7沒本質的區別,所以應該也能在IE6上運行。
我們來看看dhtmlHistory.js,在566行左右,有如下定義:
?1
var?styleValue?=?"position:?absolute;?top:?-1000px;?left:?-1000px;";?????
?2
var?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);

?2

?3

?4

?5

?6

?7

?8

?9

10

用于生成如下語句:
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>

2

3

生成這個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.?*/
2
window.historyStorage.init();


2

以把這個form寫到頁面中。
很奇怪,通過document.write生成的form也不全有問題,只是form標簽內對style的設置有問題,只要把 + "style='" + styleValue + "'>"去掉就可以了!因為水平有限,所以我左思右想也不懂為何,沒能說出原由。
現在,我重新寫了一段代碼:
1
var?newContent?=
2
?????????"<div?style='"?+?styleValue?+?"'><form?id='historyStorageForm'>"
3
????????????+?"<textarea?id='historyStorageField'?name='historyStorageField'></textarea>"
4
?????????+?"</form></div>";

2

3

4

我想這樣組織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和論壇發過,可惜沒有人參與討論,不知是自己文筆問題還是太基礎。但既然是自己寫的,當然可以收回來啦。