麻辣家族討論版版 - Powered by Discuz! Board

標題: [教學] (教學第16篇)框架控制中篇 [打印本頁]

作者: 小誌 時間: 2010-5-18 18:09 標題: (教學第16篇)框架控制中篇

框架控制
我們建立框架的目的是為了方便瀏覽者的操控，但是要保此框架畫面不變，又要改變某個框架視窗的內容該怎麼辦？
方法有兩種：一是單純的使用HEML超鏈結標籤來控制，另一種就是使用JavaScript來控制。

使用HEML超鏈結標籤控制框架
若我們在框架網頁文件中撰寫HTML超鏈結標籤時沒有特別的設定連結的目的視窗時將會有一些狀況產生，如下圖：
[attach]655[/attach]
當我們按下左邊框架視窗的超鏈結後，連結的網頁文件將會出現在原來的框架視窗中，若我們希望按下左邊框架視窗的超鏈結所產生的結果出現在右邊的框架視窗該如何做呢？我們可以利用超鏈結標籤的指向屬性『TARGET』來處理：

<A HREF=”欲連結網頁” TARGET=”框架視窗名稱”>

複製代碼

實作學習：
在本例中我們將瀏覽器視窗分割成左右兩個框架視窗，左方的框架視窗命名為「LEFTWINDOW」，內容是一個導引裝置的選項網頁文件「d.htm」，而右方的框架視窗命名為「RIGHTWINDOW」，作為主要內容的顯示區，內容是一個普通的網頁頁文件「c.htm」，當我們按下左方的框架視窗內的超鏈結時，將結果呈現在右方框架視窗中：

6-7.htm(分割水平兩個框架視窗)

<HTML>
<HEAD>
<TITLE>家族網站</TITLE>
</HEAD>
<FRAMESET cols="30%,*" frameborder="No" FRAMESPACING="0">
<FRAME NAME="LEFTWINDOW" SRC="d.htm">
<FRAME NAME="RIGHTWINDOW" SRC="c.htm">
</FRAMESET>
</HTML>

複製代碼

[attach]656[/attach]

d.htm(超鏈結選項)

<HTML>
<HEAD>
<TITLE>家族網站</TITLE>
</HEAD>
<body>
<a href="http://www.twbts.com" TARGET="RIGHTWINDOW">麻辣學園</a>
<a href="http://dgr.twbts.com" TARGET="RIGHTWINDOW">築夢學園</a>
<a href="http://office.twbts.com" TARGET="RIGHTWINDOW">OFFICE學園</a>
</body>
</HTML>

複製代碼

在超鏈結選項網頁d.htm中，裡面的超鏈結標籤我們都加上了「TARGET="RIGHTWINDOW"」屬性設定，目的就是為了將超鏈結的結果指向到名稱為『RIGHTWINDOWS』的框架視窗，也就是右方的框架視窗。
[attach]657[/attach]

作者: 小誌 時間: 2010-5-18 18:14

使用JavaScript控制框架
還記得JavaScript中的window物件有一個屬性『location（位置）』嗎？它可以改變你目前的瀏覽網址，其撰寫格式如下：
Location屬性使用

Window.location = “URL”

複製代碼

請注意喔！上列的撰寫格式只能用於沒有框架的瀏覽器視窗呦，如果你用於有框架的瀏覽器視窗將會發生連結的網頁文件出現在原來的框架視窗中！如下例：

6-8.htm(分割水平兩個框架視窗)

<HTML>
<HEAD>
<TITLE>家族網站</TITLE>
</HEAD>
<FRAMESET cols="30%,*" frameborder="No" FRAMESPACING="0">
<FRAME NAME="LEFTWINDOW" SRC="e.htm">
<FRAME NAME="RIGHTWINDOW" SRC="c.htm">
</FRAMESET>
</HTML>

複製代碼

e.htm(超鏈結選項)

<HTML>
<HEAD>
<TITLE>家族網站</TITLE>
</HEAD>
<body>
<a href="javascript:window.location='http://www.twbts.com'">麻辣學園</a>
<a href="javascript:window.location='http://dgr.twbts.com'">築夢學園</a>
<a href="javascript:window.location='http://office.twbts.com'">OFFICE學園</a>
</body>
</HTML>

複製代碼

[attach]658[/attach]

所以我們必須將location屬性設定做一下變化：
框架中的Location屬性使用

parent.框架視窗名稱.location= “URL”

複製代碼

『parent』：你一定覺得很奇怪，為什麼要將window改寫成parent呢？以上例來說：當我們利用<FRAMESET>標籤來設定框架視窗「LEFTWINDOW（超鏈結選項框架視窗）」與「RIGHTWINDOW(主內容框架視窗)」，這兩個框架視窗只是整個瀏覽器視窗的「部分」，其地位是相等的，所以當我們從「LEFTWINDOW」框架視窗中來控制「RIGHTWINDOW」框架視窗時，必須向上追溯到定義「LEFTWINDOW」框架視窗的框架組(瀏覽器視窗，預設名稱就是parent)，再透過框架組(parent)來控制「RIGHTWINDOW」框架視窗。
『框架視窗名稱』：<FRAME>標籤「NAME」屬性所指定的框架視窗名稱。

實作學習：
將瀏覽器視窗分割成左右兩個框架視窗，左方的框架視窗命名為「LEFTWINDOW」，內容是一個導引裝置的選項網頁文件「f.htm」，而右方的框架視窗命名為「RIGHTWINDOW」，作為主要內容的顯示區，內容是一個普通的網頁頁文件「c.htm」，使用JavaScript程式設計：當我們按下左方的框架視窗內的超鏈結時，將結果呈現在右方框架視窗中（本範例的重點在導引裝置的選項網頁文件「f.htm」中的JavaScript敘述）：

6-9.htm

<HTML>
<HEAD>
<TITLE>家族網站</TITLE>
</HEAD>
<FRAMESET cols="30%,*" frameborder="No" FRAMESPACING="0">
<FRAME NAME="LEFTWINDOW" SRC="f.htm">
<FRAME NAME="RIGHTWINDOW" SRC="c.htm">
</FRAMESET>
</HTML>

複製代碼

f.htm(超鏈結選項)

<HTML>
<HEAD>
<TITLE>家族網站</TITLE>
</HEAD>
<script language="JavaScript">
//轉址函式
function changepage(URL)
{
//自動載入新的網頁至指定的框架視窗中
parent.RIGHTWINDOW.location=URL
}
</script>
<body>
<a href="javascript:changepage('http://www.twbts.com')">麻辣學園</a>
<a href="javascript:changepage('http://dgr.twbts.com')">築夢學園</a>
<a href="javascript:changepage('http://office.twbts.com')">OFFICE學園</a>
</body>
</HTML>

複製代碼

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