Frameset、Frame、Iframe详解之三:Javascript操作Frameset

Window 属性 说 明
frames[] 存放当前窗口中所有frame对象的数组。
length 窗口 frame 的数目,和 window.frames.length 等同。
name 当前窗口的名字,自 JavaScript 1.1 起,这个值是可读写的。
parent 对父窗口的引用。
self 对窗口自身的引用。
top 对最高级别窗口的引用,这个值通常和parent一致,除非 frame 中有更多的 frame。
window 另外一个对当前窗口的引用。

 Parent.html: 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title>FrameSet Test</title>  
  5. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />  
  6. </head>  
  7. <frameset rows="33%,*,33%">  
  8. <frame src="framerelationship.html" name="frame1" id="frame1" />  
  9. <frame src="moreframes.html" name="frame2" id="frame2" />  
  10. <frame src="framerelationship.html" name="frame5" id="frame5" />  
  11. </frameset>  
  12. </html>   

parent.html文档主体可以看作是三个 frame ,frame2, frame5 的 parent 。

1.在父窗口取得 frame 数目:

  1. window.frames.length  

2.在子窗口获取frame的数目:

  1. window.parent.frames.length  
  2. //或  
  3. parent.frames.length  

parent 表示一个窗体的父窗体,也可以用 top 来表示最高级别的窗体,这样可以写成 top.frames.length ,但是需要注意的是:除非你有嵌套 frame ,否则 parent 和 top 通常表示的是一个对象。

3.访问IFrame中的窗口

访问一个 frame ,可以用 name 或者下标的方式查询 frames 数组,parent.frames[0].name 将会输出第一个 frame 的名字,在我们的例子中就是 frame1,同样,我们也可以用 parent.frame1 或者  parent.frames["frame1"] 来实现相同的操作,记住,一个 frame 就是一个 window,知道这个,就可以使用所有Window 和 Document 的方法。

当理解了 frame 之间的关系,可以很容易的通过 parent.frames[] 操作任何 frame ,假如你有一个简单的框架页面: 

  1. //在任何一个frame中使用下列代码可得到frame2    
  2. var varframe2 = parent.frames[1]; // 或者使用名称    

4.控制这些 iframe

iframe 是一个需要注意的 frame 变种,用iframe可以让你不使用框架,但是却可以嵌入页面.事实上,我们也可以用 frames[] 的方法,此外,如果你的 iframe 有命名,可以通过 getElementById 来操控,示例如下:

  1. <iframe src="http://www.google.com" name="iframe1" id="iframe1" height="200" width="200"></iframe>  
  2. <form action="" method="get">  
  3. <input type="button" value="Load by Frames Array" onclick="frames['iframe1'].location='http://www.javascriptref.com';" />  
  4. <input type="button" value="Load by DOM" onclick="document.getElementById('iframe1').src='http://www.pint.com';" />  
  5. </form>   

通过在链接标签里面加上 target 来将操作指向目标 frame :

  1. <a href="http://www.google.com" target="framename">Google</a>  

 5.多窗体的不同元素的访问

a.使用索引号:parent.frames[Index1].docuement.forms[index2]
b.使用框架名和ID:parent.framesName.document.getElementById()

 theFather.html

  1. <html>  
  2. <head>  
  3. <title>frame get Value test</title>  
  4. </head>  
  5. <iframe frameborder="1" height="78" marginheight="0" marginwidth="0" scrolling="no" width="100%" src="theSon.html"></iframe>  
  6. <h3>这是theFather的文本框</h3>  
  7. <input type="text" name="txtFather" id="txtFather" />  
  8. </html>  

theSon.html

  1. <html>  
  2. <head>  
  3. <title>the son frame</title>  
  4. <script type="text/javascript">  
  5. //此方法用于向其父文本框类赋值  
  6. function setValue(){     
  7.   //获得子类文本框中的值  
  8.   var sonValue=document.getElementById("txtSon").value;  
  9.   //弹出信息,此处仅用于测试  
  10.   alert("theSon的值为:"+sonValue);  
  11.   //向父类文本框赋值  
  12.   parent.document.getElementById("txtFather").value=sonValue;  
  13. }  
  14. </script>  
  15. </head>  
  16. <body>  
  17. <h3>这是theSon的文本框及按钮</h3>  
  18. <input type="text" name="txtSon" id="txtSon" />  
  19. <input type="button" name="btnSon" id="btnSon" value="提交" onclick="setValue();" />  
  20. </body>  
  21. </html>  

6.让Iframe可以自动随页面高度调整和自动适应

  1. //该代码写在iframe所在的页面,其中main是iframe的名字  
  2. <Script for=window EVENT=onload LANGUAGE="JScript">  
  3. document.all("main").height=main.document.body.scrollHeight;  
  4. </Script>  

7.防止页面被包含在 frame 里面 

  1. <script type="text/javascript">  
  2. <!--  
  3. function frameBuster()  
  4. {  
  5.     if (window != top)  
  6.         top.location.href = location.href;  
  7. }  
  8. window.onload = frameBuster;  
  9. // -->  
  10. </script>   

8.防止包含在Frame(IFrame)里面的页面被直接访问

  1. <script type="text/javascript">  
  2. <!--  
  3. if (parent.location.href == self.location.href)  
  4.     window.location.href = 'frameset.html';  
  5. //-->  
  6. </script>   

你可能感兴趣的:(Frameset、Frame、Iframe详解之三:Javascript操作Frameset)