window的frame操作方式

hn_archer

浏览: 132986 次
性别:
来自: 河南

最近访客更多访客>>

jacktan123

starlyd

alpenliebe

cocpp

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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>

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

<br />

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

function childAlert()

{

alert("i'm children");

parent.parentAlert();//父页面方法

}

</script>

</head>

<body>

<div id="df">Wo shi childDIV. </div>

</body>

</html>

分享到：

IE、FireFox兼容问题 | 制作网页的23个经典代码

2012-04-06 09:05
浏览 1539
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论