当前位置: 代码迷 >> Web前端 >> window的frame操作有关问题
  详细解决方案

window的frame操作有关问题

热度:411   发布时间:2013-02-27 10:48:11.0
window的frame操作问题

1nameid得到frame对象的区别

???name属性得到的是frame框架里的页面的WINDOW对象,

???id属性得到的即是frame标签。

?

例:我们可以用name属性得到frame所连接页面的WINDOW对象

????var?iframeWindow = window.frames[indexframeName];

????

????var?iframeWindow = window.frameName;??

这两种方式IEFireFox都支持!

但是iframeWindow这个对象无法得到frame标签的attribute,例如:我们想找到frame标签的src属性的值,通过下面的方式,是错误的!

????alert(iframeWindow.src);?//这是得不到的

在这个时候,我们只能通过id属性去得到frame标签对象。

????alert(document.getElementById("frameName").src);?//这是正确的

?

2:父级、子级之间的数据、方法调用。

在父级窗口,我们可以用iframeWindow直接去访问子页面的methodattribute

例:

????alert(iframeWindow.document.getElementById("df").innerHTML);

????alert(iframeWindow.childAlter());??

在子级窗口,我们可以用parent直接去访问?父页面的methodattribute

例:

????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>

?

?

?

  相关解决方案