1:name和id得到frame对象的区别
???name属性得到的是frame框架里的页面的WINDOW对象,
???id属性得到的即是frame标签。
?
例:我们可以用name属性得到frame所连接页面的WINDOW对象
????var?iframeWindow = window.frames[index或frameName]; ????或 ????var?iframeWindow = window.frameName;?? |
这两种方式IE、FireFox都支持!
但是iframeWindow这个对象无法得到frame标签的attribute,例如:我们想找到frame标签的src属性的值,通过下面的方式,是错误的!
????alert(iframeWindow.src);?//这是得不到的 |
在这个时候,我们只能通过id属性去得到frame标签对象。
????alert(document.getElementById("frameName").src);?//这是正确的 |
?
2:父级、子级之间的数据、方法调用。
在父级窗口,我们可以用iframeWindow直接去访问子页面的method和attribute。
例:
????alert(iframeWindow.document.getElementById("df").innerHTML); ????alert(iframeWindow.childAlter());?? |
在子级窗口,我们可以用parent直接去访问?父页面的method和attribute。
例:
????alert(parent.parentAlert()); |
?
3:完整的例子如下:
Parent页面:index.jsp
<%@?page?language="java"?import="java.util.*"?pageEncoding="UTF-8"%> ? <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> ????<title>My JSP 'index.jsp' starting page</title> ????<script?type="text/javascript"> ????function?changeSrc() ????{ ???????//-------window.frames[]方法得到子页面window对象-------- ???????var?iframeWindow = window.frames[0]; ????????//= window.frames["myframe"]; ? ????????//-------window.frameName方法得到子页面window对象------- ???????var?iframeWindow = window.myframe; ? ????????//--------访问子页面对象、方法------------- ????????alert(iframeWindow.document.getElementById("df").innerHTML); ????????iframeWindow.childAlert();????? ?????????? ???????//-------window.document.getElementById()得到标签对象--- ???????var?iframeWindow = window.document.getElementById("myframe"); ???????alert(iframeWindow.src); ????} ?????? ????function?parentAlert() ????{ ????????alert("i'm parent!"); ????} ????</script> </head> ? <body> ????下面是iframe ????<iframe?id="myframe"?name="myframe"?src="child.jsp"frameborder="0"></iframe> ????<br?/> ????<input?type="button"?value="连接页面"onclick="javascript:changeSrc();"?/> </body> </html> ? |
Child页面:child.jsp
<%@?page?language="java"?import="java.util.*"?pageEncoding="UTF-8"%> ? <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ??<head> ????<title>My JSP 'child.jsp' starting page</title>? ???????<script?type="text/javascript"?> ???????????function?childAlert() ???????????{ ??????????????alert("i'm children"); ??????????????parent.parentAlert();//父页面方法 ???????????}????????? ???????</script> ????</head> ? ??<body> ????<div?id="df">Wo shi childDIV.?</div>?????? ??</body> </html> ? |
?
?