在多視窗的分幀頁面中,各分視窗之間的資訊互動是經常的事。在導航視窗中點了超級鏈接,那麼如何在另一個視窗中開啟連結的網頁呢?我在這個視窗中按下按鈕,能在另一個視窗中寫訊息嗎?窗口那麼多,又要如何辨識窗口呢?請看下面的例子。
一、在導航窗口點擊鏈接,在另一個窗口打開網頁
現有一分幀頁面如上圖所示的,A視窗是網站logo及廣告,B視窗是導覽欄,C是顯示頁面的視窗。此分幀頁面的原始碼為:
| <framesetrows=20%,*> <framename=topFramescrolling=NOnoresizesrc=toppage.htm> <framesetcols=18%,*> <framename=leftFramenoresizesrc=leftpage.htm> <framename=mainFramesrc=mainpage.htm> </frameset> </frameset> |
若要求在B視窗中的連結頁面(test.htm)在C視窗中打開,那麼B視窗中的連結應這樣寫:<a herf=test.htm target=mailFrame>此連結的頁面在C視窗中打開</a>,這裡扮演關鍵角色的是<A>標記中的target參數,你想要在那個視窗中開啟網頁,就在Target參數中設定那個視窗的名稱。
二、在B視窗中按下一個按鈕,在C視窗中寫一行字
本例的頁面格式與上例相同,完成後的效果是這樣的:按下B視窗中「在C視窗寫字」的按鈕後,在C視窗中就出現一行文字「嗨!你好!這是透過B視窗控製而寫的字。分幀頁面的程式碼及每個視窗中的網頁檔案與上例相同。
製作方法:
1、 在C視窗網頁(mainpage.htm)的原始碼<head>與</head>之間插入下面這段Javascript程式:
| <scriptlanguage=Javascript> <!-- functionhtest(){ document.write(嗨!你好!這是透過B視窗控製而寫的字。) } --> </script> |
這段程式的作用是在目前視窗寫上一段文字。
2.那麼如何在B視窗中呼叫C視窗中的程式呢?先看B視窗中「在C視窗中寫字」這個按鈕的原始碼:
| <inputtype=buttonvalue=在C視窗中寫字onclick=parent.mainFrame.htest()> |
在這段程式碼中,關鍵是程式碼“parent.mainFrame”,這裡引入一個新的概念―視窗結構關係,也就是在多視窗頁面中,各視窗之間的關係是以什麼原則來決定的。視窗關係的確定原則是:目前視窗分割出來的視窗為目前視窗的「子視窗」(children),那麼目前視窗就是分割出來視窗的「父視窗」(parent)。如本例各窗口的關係如下:
從上表可得知,“瀏覽器視窗”是“topFrame”和“下部視窗”的“父視窗”,而下部視窗又是“leftFrame”和“mainFrame”兩個視窗的“父視窗”。兩個視窗之間的聯繫必須經過它們的父視窗才能進行,所以本例中要呼叫C視窗中網頁上的「htest()」很顯然是透過C與B的parent再到mainFrame,然後呼叫htest( )程式.
那麼若C視窗中向B視窗寫字的程式碼就是這樣的了: onclick=parent.leftFrame.htest();那麼,在A視窗中要向C視窗中寫一段文字的程式碼你知道怎麼寫嗎?對了,就是這樣:onclick=grandchildren.mainFrame.htest()。
從上面的例子可看出,在各視窗之間進行互動訊息,關鍵的問題是要搞清楚視窗與視窗之間的關係,其它的操作就比較簡單了。