`
yangjb
  • 浏览: 31867 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

frame之间相互控制及传值

阅读更多
我们使用Frame可以在浏览器窗口同时显示多个网页。每个Frame里设定一个网页,每个Frame里的网页相互独立。但是frame之间如何相互控制,我这里做了小列子来说明他们的关系。大致有两种情况,第一种是frameset 中嵌套frame,第二种是html(或jsp等)中嵌套iframe。两种情况基本类似,下面举例说明第二种情况:

请看代码清单:

frame.jsp
<%@ page language="java" pageEncoding="utf-8"%>
<script type="text/javascript">
function controlChildren(){
var childWindow1 = document.frames['frame1'];   //获得第一个窗口对象
var childWindow2 = document.frames['frame2'];   //获得第二个窗口对象
alert("I can control my child");
childWindow1.document.all["text1"].value="parent set my value=text1";
childWindow2.document.all["text2"].value="parent set my value=text2";
}
</script>


<frameset>
<frame src="test.jsp" name="frame1" >
<frame src="index.jsp" name="frame1" >
</frameset>
<BODY>
<div>parent frame</div>
<div>
<input type="text" id="text" value="" size="25">
<input type="button" name="button" id="button" value="controlChild1Frame" onClick="controlChildren();">
<iframe id="frame1" name="frame1" src="frame1.jsp"></iframe>
<iframe id="frame2" name="frame2" src="frame2.jsp"></iframe>
</div>
</BODY>


frame1.jsp(代码)
<BODY>
<div>child1 frame</div>
<input name="text1" id="text1" type="text" value="" size="25">
</BODY>

frame2.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<script type="text/javascript">
function controlParent(){
alert("I can control my parent");
parent.document.all["text"].value="my child set my value=text";
}
function controlOtherFrame(){
alert("I can control my brother");
var brotherWindow = parent.frames['frame1'];
brotherWindow.document.all["text1"].value="my brother set my value=text1";
}
</script>
<BODY>
<div>child2 frame</div>
<input name="text2" id="text2" type="text" value="" size="25">
<input name="button1" id="button1" type="button" value="controlParentFrame" onClick=" controlParent();">
<input name="button2" id="button2" type="button" value="controlChild1Frame" onClick=" controlOtherFrame();">
</BODY>
运行一下,能看到结果,一目了然.其实每个窗体的document对象都有一个数组的属性,即frames,通过该数组可以很容易的访问到其儿子窗体,当然儿子窗体也可以通过parent来访问其父窗体。

第一种情况补充:
取得上层frame: window.parent
取得上上层frame: window.parent.parent
取得和自己frame同级别的frame: window.parent.frames[被操作的frame的name]
改变和自己frame同级别frame的链接: window.parent.frames[被操作的framename].location.href ='新的链接'





0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics