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

现在的位置: 首页 > 综合 > 正文

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

2013年10月07日 ⁄ 综合 ⁄ 共 3504字 ⁄ 字号小中大 ⁄ 评论关闭

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

Parent.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<title>FrameSet Test</title>  

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />  

</head>  

<frameset rows="33%,*,33%">  

<frame src="framerelationship.html" name="frame1" id="frame1" />  

<frame src="moreframes.html" name="frame2" id="frame2" />  

<frame src="framerelationship.html" name="frame5" id="frame5" />  

</frameset>  

</html>

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

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

window.frames.length  

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

window.parent.frames.length  

//或  

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 ，假如你有一个简单的框架页面：

//在任何一个frame中使用下列代码可得到frame2    

var varframe2 = parent.frames[1]; // 或者使用名称    

4.控制这些 iframe

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

<iframe src="http://www.google.com" name="iframe1" id="iframe1" height="200" width="200"></iframe>  

<form action="" method="get">  

<input type="button" value="Load by Frames Array" onclick="frames['iframe1'].location='http://www.javascriptref.com';" />  

<input type="button" value="Load by DOM" onclick="document.getElementById('iframe1').src='http://www.pint.com';" />  

</form>

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

<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

<html>  

<head>  

<title>frame get Value test</title>  

</head>  

<iframe frameborder="1" height="78" marginheight="0" marginwidth="0" scrolling="no" width="100%" src="theSon.html"></iframe>  

<h3>这是theFather的文本框</h3>  

<input type="text" name="txtFather" id="txtFather" />  

</html>

theSon.html

<html>  

<head>  

<title>the son frame</title>  

<script type="text/javascript">  

//此方法用于向其父文本框类赋值  

function setValue(){     

  //获得子类文本框中的值  

  var sonValue=document.getElementById("txtSon").value;  

  //弹出信息，此处仅用于测试  

  alert("theSon的值为："+sonValue);  

  //向父类文本框赋值  

  parent.document.getElementById("txtFather").value=sonValue;  

}  

</script>  

</head>  

<body>  

<h3>这是theSon的文本框及按钮</h3>  

<input type="text" name="txtSon" id="txtSon" />  

<input type="button" name="btnSon" id="btnSon" value="提交" onclick="setValue();" />  

</body>  

</html>

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

//该代码写在iframe所在的页面，其中main是iframe的名字  

<Script for=window EVENT=onload LANGUAGE="JScript">　　

document.all("main").height=main.document.body.scrollHeight;  

</Script>

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

<script type="text/javascript">  

<!--  

function frameBuster()  

{  

    if (window != top)  

        top.location.href = location.href;  

}  

window.onload = frameBuster;  

// -->  

</script>

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

<script type="text/javascript">  

<!--  

if (parent.location.href == self.location.href)  

    window.location.href = 'frameset.html';  

//-->  

</script>

【上篇】验证码识别技术
【下篇】thinkpad 最新驱动下载

作者: more0007

该日志由 more0007 于11年前发表在综合分类下，最后更新于 2013年10月07日.
转载请注明: Frameset、Frame、Iframe详解之三：Javascript操作Frameset | 学步园 +复制链接

抱歉!评论已关闭.

学步园