使用JavaScript框架 在講述 window 物件的時候,我們提到過,一個框架內的網頁也是 window 對象,也就是說,Frame 物件也是 window 物件。用最容易理解的話來說,每一個 HTML 檔案佔用一個 window 對象,包括定義框架的網頁(「框架網頁」)。在IE 裡用「」標記在文件中插入的框架也是window 對象,但用「包含網頁」的方法(在HTML 中顯示為「 <br/><!--<br/> function hello(){<br/> alert("hello,ajax!");<br/>}<br/>window.hello();<br/>//--><br/>如果執行了這段程式碼,就會彈出「hello,ajax !」的窗口,這正是執行hello()函數的結果。那為什麼hello()變成了window物件的方法呢?因為在一個頁面內定義的所有全域變數和全域函數都是作為window物件的成員。例如:var a=1;alert(window.a);就會彈出對話框顯示為1。同樣的原理,在不同框架之間共享變數和函數,就是要透過window物件來呼叫。 例如:一個商品瀏覽頁面由兩個子框架組成,左側表示商品分類的連結;當使用者點擊分類連結時,右側顯示對應的商品清單;使用者可以點擊商品旁的【購買】連結將商品加入購物車。 在這個例子中,可以利用左側導航頁面來儲存使用者想要購買的商品,因為當使用者點擊導航連結時,變化的是另一個頁面,即商品展示頁面,而導航頁面本身是不變的,因此其中的JavaScript變數不會遺失,可以用來儲存全域資料。其實作原理如下:假設左側頁面為link.html,右側頁面為show.html,頁面結構如下: New Document 在show.html中展示的商品旁邊可以加入這樣一條語句:其中link表示導航框架,在link.html頁面中定義了arrOrders數組來儲存商品的id,函數addToOrders()用來回應商品旁邊【購買】連結的點擊事件,它接收的參數id表示商品的id,例子中是id為32068的商品:<br/><!--<br/>var arrOrders=new Array();<br/>function addToOrders(id){ <br/> arrOrders.push(id);<br/>}//-->這樣,在結帳頁面或是購物車瀏覽頁面就可以用arrOrders來取得所有準備購買的商品。 框架可以使一個頁面劃分為功能獨立的多個模組,每個模組之間彼此獨立,但又可以透過window物件的引用來建立聯繫,是Web開發中的重要機制。在Ajax開發中,還可以利用隱藏框架實現各種技巧,在後面介紹Ajax實例編程時可以發現,無刷新上傳文件以及解決Ajax的前進後退問題都會用到這種技術。 🎜🎜🎜🎜