JavaScript

   


窗柜 (Frame)


窗柜

窗柜是視窗所劃分出來的區域, 每一個窗柜內可以包含一頁文件或另一些窗柜, 你可以在某一個窗柜內控制另一個窗柜物件。

例子: 在某個窗柜用 document.write 寫東西入另一個窗柜  js_tut_eg_frame.htm

js_tut_eg_frame.htm
<html><head><title> JS tutorial : Frame example</title></head>
<frameset cols="50%,*">
  <frame name="left" src="js_tut_eg_frameleft.htm">
  <frame name="right" src="js_tut_eg_frameright.htm">
</frameset>
js_tut_eg_frameleft.htm
<html><head><title>Left Frame</title>
<body>

<script>
document.write("My name is " + parent.frames['left'].name)
</script>

<form>
<input type=button value="How are you, right frame?"
onClick="parent.frames['right'].document.write('Fine, thanks.')">
<br>
<input type=button value="How are you, parent?"
onClick="parent.document.write('Fine, thanks.')">

</form>
</body></html>
js_tut_eg_frameright.htm
<html><head><title>Left Frame</title>
<body>

<script>
document.write("My name is " + parent.frames['right'].name)
</script>

<form>
<input type=button value="How are you, left frame?"
onClick="parent.frames['left'].document.write('Fine, thanks.')">
<br>
<input type=button value="How are you, parent?"
onClick="parent.document.write('Fine, thanks.')">
</form>
</body></html>

例子說明:

代表窗柜的 HTML 碼 表示方式
<frame name="left"> parent.frames['left']
parent.frames[
0]
parent.
left
<frame name="right"> parent.frames['right']
parent.frames[
1]
parent.
right

因為左邊窗柜是第一個在 <frameset> 內定義的 frame, 所以它在 frames 堛漲鼽m是 0

 

同時開啟兩個網頁

HTML 只能讓瀏覽者在按一次連結時就開啟一個網頁, 但是 JavaScript 可以做到按一次連結就能開啟兩個或以上的網頁在不同的窗柜。

例子: 按一次連結就同時在左邊窗柜開啟 Yahoo 首頁, 並在右邊窗柜開啟 AltaVista 首頁

窗柜頁
<html><head><title> JS tutorial : Frame example</title></head>
<frameset cols="50%,*">
  <frame name="left" src="js_tut_eg_frameleft.htm">
  <frame name="right">
</frameset>
左邊窗柜頁
<html><head><title>Left Frame</title>
<body>

<a href="http://www.yahoo.com"
onClick="parent.frames['right'].location = 'http://www.altavista.com'; ">
Open Yahoo in this frame and AltaVista in the right frame</a>

</body></html>

 

刪除窗柜

你可以令某個網頁一定要顯示在整個視窗範圍, 而不要顯示在窗柜內。

例子: 刪除窗柜

<html><head>
<script>
if (top.location != self.location)    top.location = self.location ;
</script>
</head><body>
This page is always displayed in the whole window,
unless the visitor disable JavaScript.
</body></html>

例子說明:

  • top.location 是瀏覽器視窗的網頁位置, 而 self.location 就是例子中網頁的位置, 如果這兩個位置不相同, 就表示有其它網頁在視窗內, 例如含有 <frameset> 的窗柜頁, 因此我們把 top.location 指定為 self.location , 讓自己霸佔整個視窗。

 







[到頁頂] [首頁] [速查表]