Board logo

標題: [教學] (教學第17篇)框架控制 下篇 [打印本頁]
作者: 小誌    時間: 2010-5-18 18:20     標題: (教學第17篇)框架控制 下篇

同時切換框架視窗
在我們前一小節的介紹中，你可能會認為以超鏈結標籤的以『TARGET』屬性來控制框架會比使用JavaScript來得簡單多了，那是因為我們一次只改變一個框架視窗內容，如果我們要同時改變兩個或兩個以上的框架視窗內容，那恐怕就只有JavaScript做得到了！

實作學習：
假設我們將瀏覽器視窗分割成四個框架視窗，這四個框架視窗名稱分別是「controlwindow」、「topwindow」、「centwindow」、「buttomwindow」，而載入的網頁依序是「6-10-1.htm」、「6-10-2.htm」、「6-10-3.htm」、「6-10-4.htm」：
[attach]659[/attach]

6-10.htm(分割框架視窗)
  1. <HTML>
  2. <HEAD>
  3. <TITLE>同時切換框架視窗</TITLE>
  4. </HEAD>
  5. <FRAMESET cols="20%,*">
  6. <FRAME NAME="controlwindow" SRC="6-10-1.htm">
  7. <FRAMESET rows="33%,33%,*">
  8. <FRAME NAME="topwindow" SRC="6-10-2.htm">
  9. <FRAME NAME="centwindow" SRC="6-10-3.htm">
  10. <FRAME NAME="buttomwindow" SRC="6-10-4.htm">
  11. </FRAMESET>
  12. </HTML>
複製代碼
在6-10-1.htm網頁文件中，我們撰寫了一個可以同時改變三個頁框的函式changepage()，當呼叫此函式並傳遞適當的URL時，就會同時改變「topwindow」、「centwindow」、「buttomwindow」框架視窗的位址。
  1. function changepage(topweb,centweb,buttomweb)
  2. {
  3. parent.topwindow.location=topweb
  4. parent.centwindow.location=centweb
  5. parent.buttomwindow.location=buttomweb
  6. }
複製代碼
同時，利用JavaScript虛擬協定來執行changepage()函式，使「topwindow」框架視窗的位址轉移到「http://www.twbts.com」、「centwindow」框架視窗的位址轉移到「http://dgr.twbts.com」、「buttomwindow」框架視窗的位址轉移到「http://office.twbts.com」。

6-10-1.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE>家族網站</TITLE>
  4. </HEAD>
  5. <script language="JavaScript">
  6. //轉址函式
  7. function changepage(topweb,centweb,buttomweb)
  8. {
  9. //改變topwindow框架視窗內容
  10. parent.topwindow.location=topweb
  11. //改變centwindow框架視窗內容
  12. parent.centwindow.location=centweb
  13. //改變buttomwindow框架視窗內容
  14. parent.buttomwindow.location=buttomweb
  15. }
  16. </script>
  17. <body bgcolor="#FFFFCC">
  18. <p><a href="javascript:changepage
  19. ('http://www.twbts.com','http://dgr.twbts.com',
  20. 'http://office.twbts.com')">一次參觀三個網站</a></p>
  21. </body>
  22. </HTML>
複製代碼
[attach]660[/attach]
作者: 小誌    時間: 2010-5-18 18:21

跳脫框架
我想很多網主（網站主持人）都不希望自己辛苦製作的網頁文件被人盜用，如果有一個使用了框架技術的網站連結你的網站（網頁文件），同時將你的網站（網頁文件）顯示在他網站的一個框架視窗內，而成為他自己的網站內容，這樣的情況似乎是你所不願見到的，如下圖，小誌的麻辣學園網站被框在框架中：

現在你只要在框架網頁（放置分割框架視窗的網頁文件，就是含有<FRAME>框架標籤的那個網頁啦！），放置下列這段JavaScript程式敘述，就可以使你的網站(網頁文件)跳脫他人網站的框架。（如果你的網站並沒有採用框架技術也可以使用）
  1. <SCRIPT language=JavaScript>
  2. if (parent.location != window.location)
  3. {
  4. parent.location = window.location
  5. }
  6. </SCRIPT>
複製代碼
上面這段程式碼，主要是在確認你的網頁文件或框架網頁是不是由你自己網站中的網頁連結，如果不是，則它將會把你的網頁文件或框架網頁，提升等級到瀏覽器視窗的最上層。也就是說，當有個含有框架的網站要來連結你的網頁文件或框架網頁時，這段程式碼將會把它的框架結構破壞，而以你的網頁文件或框架網頁頂替！
作者: 小誌    時間: 2010-5-18 18:26

遠端遙控框架
在上一篇教學裡，我們談到了遠端遙控視窗是如何的控制主頁面視窗，但是，這個主頁面視窗是一個沒有框架的瀏覽器視窗，若這個主頁面視窗是一個有框架的瀏覽器視窗，而且我們要遠端遙控的只是主頁面視窗內的某一框架視窗時該如何處理？

實作學習：
假設我們在框架網頁6-12.htm中將瀏覽器視窗分割成兩個框架視窗，這兩個框架視窗名稱分別是「topwindow」、「buttomwindow」，而載入的網頁依序是「a.htm」、「b.htm」；在框架網頁載入時，同時建立遠端遙控視窗6-12-1.htm：

這個利用window物件open()方法建立出來的遠端遙控視窗就將他命名為「control」。
[attach]661[/attach]


6-12.htm(分割框架視窗與建立遙控視窗)
  1. <HTML>
  2. <HEAD>
  3. <TITLE>小誌的網站家族</TITLE>
  4. </HEAD>
  5. <script language="JavaScript">
  6. //建立遙控視窗
  7. window.open("6-12-1.htm","control","width=100,height=150")
  8. </script>
  9. <FRAMESET ROWS="40%,*">
  10. <FRAME NAME="topwindow" SRC="a.htm">
  11. <FRAME NAME="buttomwindow" SRC="b.htm">
  12. </FRAMESET>
  13. </HTML>
複製代碼
在遠端遙控的網頁文件6-12-1.htm中，我們撰寫了一個可以同時改變框架視窗內容的函式changepage()，當呼叫此函式並傳遞適當的URL時，就會同時改變「、「buttomwindow」框架視窗的位址。
  1. <script language="JavaScript">
  2. function changepage(webaddress)
  3. {
  4. //改變buttomwindow框架視窗內容
  5. opener.buttomwindow.location.href=webaddress
  6. }
  7. </script>
複製代碼
因為我們在在框架網頁(6-12.htm)載入時，同時建立遠端遙控視窗「control(6-12-1.htm)」，所以「control(6-12-1.htm)」的『opener(建立/開啟者)』就是框架網頁(6-12.htm)，changepage()函式的原理很簡單：因為「control」是由框架網頁(6-12.htm)所建立，而「buttomwindow」框架視窗也是由框架網頁(6-12.htm)所建立，因此兩者的等級相同，不能互相控制，所以我們可以透過「control」向上追溯到他的parent也就是框架網頁，再由框架網頁向下去控制「buttomwindow」框架視窗。


6-12-1.htm(遙控視窗)
  1. <HTML>
  2. <HEAD>
  3. <TITLE>家族網站</TITLE>
  4. </HEAD>
  5. <script language="JavaScript">
  6. //轉址函式
  7. function changepage(webaddress)
  8. {
  9. //改變buttomwindow框架視窗內容
  10. opener.buttomwindow.location =webaddress
  11. }
  12. </script>
  13. <body bgcolor="#FFFFCC">
  14. <p><a href="javascript:changepage('http://www.twbts.com')">麻辣學園</a></p>
  15. <p><a href="javascript:changepage('http://dgr.twbts.com')">築夢學園</a></p>
  16. <p><a href="javascript:changepage('http://office.twbts.com')">office學園</a></p>
  17. </body>
  18. </HTML>
複製代碼
遠端遙控視窗「control(6-12-1.htm)」內，我們建立了三個超鏈結，這三個超鏈結都利用JavaScript虛擬協定來執行changepage()函式，使「buttomwindow」框架視窗的位址轉移到「http://office.twbts.com」、「http://www.twbts.com」或是「http://office.twbts.com」。
[attach]662[/attach]
[attach]663[/attach]
[attach]664[/attach]



歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)