js和框架
如果页面使用框架集合,每个框架都有它自己的window对象表示,存放在frames集合中。在frames集合中,可用数字(从0开始,从左到右,逐行的)或名字对框架进行索引。如下所示:
Frame.html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>window对象操作帧</title> </head> <frameset rows="100,*"> <frame src="1.html" name="topFrame" /> <frameset cols="50%,50%"> <frame src="2.html" name="leftFrame" /> <frame src="3.html" name="rightFrame" /> </frameset> </frameset><noframes></noframes> </html> |
这段代码创建了一个框架集,其中包括一个顶层框架和两个底层框架。这里可以使用window.frames[0]或window.frames[“topFrame”]【注1】方式引用框架,也可以使用top对象
【注1】:在IE7中此代码不能通过测试
代替window对象引用框架,如top.frames[0]或者top.frames[“topFrame”]。
1. html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>第一个网页</title> </head>
<body> 这是第一个网页 <input type="text" name="txtUName" id="txtUName"/> </body> </html> |
2. html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>第二个网页</title> </head> <body> 这是第二个网页 </body> </html> |
3. html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>第三个网页</title> <script type="text/javascript"> function change() { top.frames[0].document.write("hello,顶端框架"); } function getData() { alert(top.frames["topFrame"].document.getElementById("txtUName").value); } </script> </head>
<body> 这是第三个网页 <input type="button" value="切换网页" onclick="change()" /> <input type="button" value="获取顶端文本框内容" onclick="getData()"/> </body> </html> |