JavaScript 與框架

簡介

使用框架可以將單一視窗分成兩個或更多的區域, 每一區域呈現一份文件, 而且都可以有各自的滑軸, 彼此不影響。區域的邊界用 frameset 標籤元件規定, 最外層的 frameset 標籤取代 body, 其中每一框架用一對 frame 標籤界定。有些瀏覽器不支持框架, noframe 標籤用以提供替代的內容。


<HTML>
<HEAD>
<TITLE>My cool page, now with frames!</TITLE>
</HEAD>

<FRAMESET>  cols="50%,50%">
   <FRAME SRC="page1.htm">
   <FRAME SRC="page2.htm">
</FRAMESET>
</HTML>

<FRAMESET>
表示內容是一組框架, 而不是一般的網頁。
cols="50%,50%"
此參數表示框架組為左右兩行框架, 各佔 50% 的空間。
<FRAME SRC="page1.htm">
此標籤規定左邊框架的內容, 其 src 參數規定網頁在 page1.htm。
<FRAME SRC="page2.htm">
此標籤規定右邊框架的內容, 其 src 參數規定網頁在 page2.htm。

例: frameset.html

瀏覽器依照由左向右的次序, 讀取 <FRAME> 標籤。假設網頁要三個框架垂直並排, 則只要再加上另一 <FRAME> 標籤, 如:

<FRAMESET cols="33%,33%,33%">
   <FRAME SRC="page1.htm">
   <FRAME SRC="page2.htm">
   <FRAME SRC="page3.htm">
</FRAMESET>

假如網頁要由上而下安排框架, 則 <FRAMESET> 標籤中的 cols 參數改為 rows 就可以。

框中有框

框架中可以再使用 <FRAMESET> 標籤安排另一框架組。下例先將視窗分成上下兩個框架, 下面的框架再分成左右兩個框架。

<FRAMESET rows="50%,50%">
   <FRAME SRC="page1.htm">
   <FRAMESET cols="50%,50%">
      <FRAME SRC="page2.htm">
      <FRAME SRC="page3.htm">
   </FRAMESET>
</FRAMESET>

第一對 FRAMESET 標籤將視窗分成上下兩個框架, 各佔 50% 的空間。
FRAME SRC 標籤表示上面的框架內容在 page1.htm.
第二對 FRAMESET 標籤是套在第一對 FRAMESET 標籤之內。這對標籤用以將下面的框架再分成左右兩個框架。
接著兩對 FRAME src 標籤表示左右兩個框架的內容分別為 page2.htm 和 page3.htm。

<FRAME> 標籤屬性

scrolling="no"
規定是否需要滑桿。
border="2"
規定框架邊線的寬度。
resize="no"
規定是否可以改變框架的尺寸, 預設為 "yes".
noresize
用以代替 resize="no", 因為不是所有的瀏覽器都支援 resize="no" command。
marginwidth="2" and marginheight="2"
規定框架的內容和邊線的間隔。

例:

course home page

參考資料:

pageresource

存取框架

frames 陣別

frameset.html


<HTML>
<HEAD>
<TITLE>My cool page, now with frames!</TITLE>
</HEAD>

<FRAMESET cols="60%,40%">
<FRAME SRC="page1.htm">
<FRAME SRC="page2.htm">
</FRAMESET>

<noFRAMESET>
Use the link below to go to the frameless version of the site.<BR>
<A HREF="noframe.htm">Frameless Sites</A>
</noFRAMESET>

</HTML>

frame1.html


<HTML>
<BODY>
I am frame 1!
</BODY>
</HTML>

frame2.html


<HTML>
<BODY>
<SCRIPT language="JavaScript">
<!--
	for (count=0; count<top.frames.length; count+=1)
	{
	    var framenum=count+1;
            document.write("Frame " + framenum + " is from "
		+ top.frames[count].location);
	    document.write("<br>");
	}
//-->
</SCRIPT>
</BODY>
</HTML>

例:

frameset.html (top frame)
frameset2.html (parent frame)

使用框架名稱

框架可用 name="yourname" 參數命名, 如:

<FRAMESET cols="20%,80%">
<FRAME SRC="frame1.htm" name="left_frame">
<FRAME SRC="frame2.htm" name="right_frame">
</FRAMESET> 存取時即可使用框架名稱, 如

	document.write(top.right_frame.location);

改變框架

改變單一框架

使用 link 標籤的 target 屬性, 可以從一框架改變另一框架的內容, 如:

	<A HREF="newpage.html" target="right_frame">New Page

	top.right_frame.location="newpage.html";

	<A HREF="n" onClick="top.right_frame.location='newpage.html';
				     return false;">New Page</a>

	<A HREF="javascript:top.right_frame.location='newpage.html';">New Page</a>

改變多個框架

frameset.html


<HTML>
<HEAD>
<TITLE>My cool page, now with frames!</TITLE>
</HEAD>

<FRAMESET cols="60%,40%">
<FRAME SRC="frame1.htm" name="left_frame">
<FRAME SRC="frame2.htm" name="right_frame">
</FRAMESET>

<noFRAMESET>
Use the link below to go to the frameless version of the site.<BR>
<A HREF="noframe.htm">Frameless Sites</A>
</noFRAMESET>

</HTML>

frame1: 動作框架


<HTML>
<head>
<SCRIPT language="JavaScript">
<!--
	function twoframes()
	{
	    parent.right_frame.location="frame4.html";
            self.location="frame3.html";
	}
//-->
</SCRIPT>
</head>

<BODY>
<A HREF="javascript:twoframes();">Change Both Frames</A>
</BODY>
</HTML>

frame2


<HTML>
<BODY>
I am frame 2!
</BODY>
</HTML>

例: frameset.html

框架瀏覽

框架中使用選擇方塊瀏覽


<HTML>

<FRAMESET cols="120,*">
<FRAME SRC="frame1.htm" name="top_frame">
<FRAME SRC="frame2.htm" name="bottom_frame">
</FRAMESET>

<noFRAMESET>
Use the link below to go to the frameless version of the site.<BR>
<A HREF="noframe.htm">Frameless Sites</A>
</noFRAMESET>

</HTML>

frame1


<FORM name="f1">
Change the lower frame:
    <select name="s1" onChange="top.bottom_frame.location=
	document.f1.s1.options[document.f1.s1.selectedIndex].value;">
	<option selected value="frame.htm">框架</option>
	<option value="doc.htm">文件</option>
	<option value="win.htm">視窗</option>
    </select>
</FORM>

例: frameset.html

自動移除框架


<HTML>
<head>
<SCRIPT language="JavaScript">
<!--
	function check_frames()
	{
	    if ( top.frames.length > 0 )
                top.location="index.html";
	}
//-->
</SCRIPT>
</head>

<BODY onLoad="check_frames();">
<H2>Welcome to my Page</H2>
</BODY>
</HTML>

直接連結首頁:
<a HREF="../webprog/index.html">直接連結首頁</a>
主視窗呈現首頁:
<A HREF="../webprog/index.html" target="_top">主視窗呈現首頁</A>
從內層框架呈現首頁於主視窗
<A HREF="frame/newindex.html">從內層框架呈現首頁於主視窗</A>

把內容送到框架


<HTML>
<head>
<SCRIPT language="JavaScript">
<!--
	function check_frames()
	{
	    if ( top.frames.length == 0 )
                top.location="index.html";
	}
//-->
</SCRIPT>
</head>

<BODY onLoad="check_frames();">
<H2>Welcome to my Page</H2>
</BODY>
</HTML>

透過框架使用變數

frameset.html

<HTML>

<FRAMESET cols="150,*">
<FRAME SRC="frame1.html" name="left_frame">
<FRAME SRC="frame2.html" name="right_frame">
</FRAMESET>

<noFRAMESET>
Use the link below to go to the frameless version of the site.<BR>
<A HREF="noframe.htm">Frameless Sites</A>
</noFRAMESET>

</HTML>

frame1.html

<HTML>
<head>
<SCRIPT language="JavaScript">
<!--
    var thename="";
    var thefood="";
//-->
</SCRIPT>
</head>

<BODY>
This is frame1.html, it holds the variable values.  You can put any content you like here.
</BODY>
</HTML>

frame2.html

<HTML>
<head>
<SCRIPT language="JavaScript">
<!--
    function store_info()
    {
        top.left_frame.thename=document.f1.yourname.value;
        self.location="frame3.html";
    }
//-->
</SCRIPT>
</head>

<BODY>
Please enter your name below.
<p>
<FORM name="f1">
Your name:
<input type="text" name="yourname" size="25">
<P>
<input type="button" value="Continue" onClick="store_info();">
</FORM>
</BODY>
</HTML>

frame3.html

<HTML>
<head>
<SCRIPT language="JavaScript">
<!--
    function more_info()
    {
        top.left_frame.thefood=document.f2.yourfood.value;
        self.location="frame4.html";
    }
//-->
</SCRIPT>
</head>

<BODY
onLoad="document.f2.yourname.value=top.left_frame.thename;">
<SCRIPT language="JavaScript">
<!--
    document.write("Hi, " + top.left_frame.thename + "!<br>");
//-->
</SCRIPT>
How I'd like to get your favorite food, please enter it below:
<p>
<FORM name="f2">
Your name:
<input type="text" name="yourname" size="25">
<P>
Favorite food:
<input type="text" name="yourfood" size="25">
<P>
<input type="button" value="Continue" onClick="more_info();">
</FORM>
</BODY>
</HTML>

frame4.html

<HTML>
<head>
<SCRIPT language="JavaScript">
<!--
    function print_info()
    {
        document.write("Thank you, " + top.left_frame.thename + "!<p>");
        document.write("You must really like " + top.left_frame.thefood + "!");
    }
//-->
</SCRIPT>
</head>

<BODY>
<SCRIPT language="JavaScript">
<!--
    print_info();
//-->
</SCRIPT>
</BODY>
</HTML>