梦想飞翔

自强不息
posts - 111, comments - 30, trackbacks - 0, articles - 0
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

html框架之间的关系

Posted on 2007-08-09 10:52 love1563 阅读(360) 评论(0)  编辑  收藏 所属分类: JSP/Servlets/JSF

如下代码:
index.htm:
    <head>
        <title>Frameset Example</title>
    </head>
    <frameset rows="100,*">
        <frame src="frame.htm" name="topFrame" />
        <frameset cols="50%,50%">
            <frame src="anotherframe.htm" name="leftFrame" />
            <frame src="yetanotherframe.htm" name="rightFrame" />
        </frameset>
    </frameset>

bule.htm

<head>

<script language="javascript" type="text/javascript">
 function doBlur(value,tag) {

  if (tag == "bluetest1") {
   parent.frames[0].document.getElementById("redtest1").value = value;
   top.frames[2].document.getElementById("righttest1").value = value;
  } else {
   parent.frames[0].document.getElementById("redtest2").value = value;
   top.frames[2].document.getElementById("righttest2").value = value;
  }
  
 }


</script>
<title>blueFrame</title>
</head>
<body>
    <h1>blueFrame</h1>
    <table border="1">
        <tr>
            <td>window.name =</td><td><script>document.write(window.name)</script></td>
        </tr>
        <tr>
            <td>top.name =</td><td><script>document.write(top.frames[2].name)</script></td>
        </tr>
        <tr>
            <td>parent.name =</td><td><script>document.write(parent.frames[1].name)</script></td>
        </tr>
    </table>
   
    bluetest1:
 <input type="text" name="test1" onblur ="doBlur(this.value,'bluetest1');" /><br><br>

 bluetest2:
 <input type="text" name="test2" onblur ="doBlur(this.value,'bluetest2');" /><br><br>
</body>

red.htm
<head>
<title>redFrame</title>
</head>
<body>
    <h1>redFrame</h1>
    <table border="1">
        <tr>
            <td>window.name =</td><td><script>document.write(window.name)</script></td>
        </tr>
        <tr>
            <td>top.name =</td><td><script>document.write(parent.parent.frames[1].frames[1].name)</script></td>
        </tr>
        <tr>
            <td>parent.name =</td><td><script>document.write(parent.frames[1].name)</script></td>
        </tr>
    </table>
        redtest1:
 <input type="text" name="redtest1"  /><br><br>

 redtest2:
 <input type="text" name="redtest2"  /><br><br>

</body>

frame.htm
<head>
<title>topFrame</title>
</head>
<body>
    <h1>topFrame</h1>
    <table border="1">
        <tr>
            <td>window.name =</td><td><script>document.write(window.name)</script></td>
        </tr>
        <tr>
            <td>top.name =</td><td><script>document.write(top.name)</script></td>
        </tr>
        <tr>
            <td>parent.name =</td><td><script>document.write(parent.name)</script></td>
        </tr>
    </table>
</body>

anotherframe.htm
   <head>
        <title>Frameset Example</title>
    </head>
    <frameset cols="50%,50%">
        <frame src="red.htm" name="redFrame" />
        <frame src="blue.htm" name="blueFrame" />
    </frameset>
yetanotherframe.htm
<head>
<title>rightFrame</title>
</head>
<body>
    <h1>rightFrame</h1>
    <table border="1">
        <tr>
            <td>window.name =</td><td><script>document.write(window.name)</script></td>
        </tr>
        <tr>
            <td>top.name =</td><td><script>document.write(top.name)</script></td>
        </tr>
        <tr>
            <td>parent.name =</td><td><script>document.write(parent.name)</script></td>
        </tr>
    </table>
   
    righttest1:
 <input type="text" name="righttest1" /><br><br>

 righttest2:
 <input type="text" name="righttest2" /><br><br>
</body>

运行效果:
frames.bmp


只有注册用户登录后才能发表评论。


网站导航: