. SmartNavigation這個Page屬性很有意思,他在不改動(其實是改動很小)頁面元素布局的情況下,居然可以類比出非常平滑的“無重新整理”頁面,為什麼這個“無重新整理”要闊起來呢?其實他是重新整理了的,而且用的也不是什麼xmlhttp也不是xmldom技術,它是事實在在的Submit,可能這樣是為了瀏覽器安全色性什麼的來考慮的吧。
SmartNavigation的實現原理,其實和我們在動畫繪製中使用的雙緩衝技術及其相似。首先說一下他對普通頁面的改造,他在普通的.aspx頁面的返回結果中,加了兩行代碼,一個是IFrame,一個是JScript指令碼:
...<IFRAME ID=__hifSmartNav NAME=__hifSmartNav STYLE=display:none src="/aspnet_client/system_web/1_1_4322/SmartNav.htm"></IFRAME>
...<script language="JScript" src="/aspnet_client/system_web/1_1_4322/SmartNav.js"></script>
...
這中間的IFrame(__hifSmartNav)就相當於動畫繪製中的實際繪圖表面,在Smart Navigate中,他就是實際的Submit頁面和資料接收頁面。這一切都是SmartNav.js的傑作,SmartNav.js中使用了一個更有意思的技術,其實是老的不能再老的技術,用現代的話來說就是hook,說遠點和Dos下修改中斷向量有異曲同工之妙。它是怎麼做的呢?其實除了顯示輸出,一切的操作都複製到IFrame裡去執行去了,因為IFrame對象,和Document對象有著最大的相似性,包括屬性和事件等。
當我們執行enable了SmartNavigation的頁面時,它首先被SmartNav.js引導,這個指令碼中最關鍵的一句就是:var rc = window.__smartNav.attachForm();,他的作用就是把我們當前頁面上的form,封裝到一個叫__smartNav的類中,然後用這個類來操作一切navigate。
這是SmartNav.js中最關鍵最精彩的代碼:
if (snfm.__formAttached == true) return true;
snfm.__formAttached = true;
snfm.attachEvent("onsubmit", window.__smartNav.init);
snfm._submit = snfm.submit;
snfm.submit = window.__smartNav.submit;
snfm.target = window.__smartNav.hifName;
他完成了form的attach,同時hook了頁面的submit事件,還在最後一句把__smartNav中form的target設定到了__hifSmartNav(這就是隱藏的那個IFrame)。如果不改變target,那麼submit就把我們的當前form提交了。
說道這兒已經就沒有什麼好說得了,提交是__hifSmartNav執行的,返回的資料也回到了這個IFrame中,剩下的就是把獲得資料寫回到我們本來的那個document中去,那些代碼比較的複雜,處理的情況也挺多,連標題的更新都是考慮到了的,有興趣就自己去讀讀罷。