JavaScript访问同一个页面中的不同iframe的内容！

niunan

浏览: 719117 次
性别:
来自: 南宁

最近访客更多访客>>

u012363178

abc123

Gootearsine

草料场

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JavaScript Chrome HTML XHTML Firefox

比较大一点的WEB项目一般页面都会用到iframe，这样如何访问各个iframe的内容就显得比较重要，比如登陆页放在一个iframe中，而登陆状态显示页又放在同一个页面的另一个iframe中，那样的话在登陆的时候就得刷新另一个iframe中的登陆状态显示页，经本人一晚上GOOGLE+亲测，得如下代码，可通过javascript来访问或刷新同一个页面中不同iframe中的内容。
本样例共3个测试文件：index.html, ye1.html, ye2.html 各个文件源码如下：
index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS框架测试</title>
</head>
<script language="javascript" type="text/javascript">
function fun()
{
    window.frames["ye1"].document.getElementById("con1").innerHTML = "aaa";  // 设置子窗体中的内容
//	window.frames["ye1"].location.reload();    // 刷新子窗体
}
</script>
<body>
<p>
<iframe src="ye1.html" name="ye1" width="200" height="120" scrolling="auto"></iframe>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<iframe src="ye2.html" name="ye2" width="300" height="120" scrolling="auto"></iframe>
</p>
<p>
  <input type="button" name="Submit" value="改变frm1的内容" onclick="fun()" />
</p>
<div id="main"></div>
</body>
</html>

ye1.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页面一</title>
<script>
	var i = Math.random();
	document.write(i);
</script>
</head>

<body>
<p>页面一</p>
<div id="con1"></div>
</body>
</html>

ye1里加上一段javascript是为了方便在测试刷新的时候能看到效果，即每回刷新都随机生成一个数.
ye2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页面一</title>
</head>
<script language="javascript" type="text/javascript">
function fun()
{
	// window.parent.document.getElementById("main").innerHTML = "哎呀";   // 设置父窗体内的内容
	// window.parent.frames["ye1"].location.reload();   // 刷新父窗体中的另一個子窗體
	window.parent.frames["ye1"].document.getElementById("con1").innerHTML = "bbb";  // 设置父窗体中的另一个子窗体的内容
}
</script>
<body>
<p>页面二</p>
<p>
  <input type="button" name="Submit" value="改变页面内容"  onclick="fun()"/>
</p>
<div id="con2"></div>
</body>
</html>

    运行index.html点击按钮即可看到效果，以上代码解决如下问题：
    ① 父窗体访问或刷新子窗体
    ② 子窗体访问或刷新父窗体
    ③ 同一个父窗体中的两个子窗体之间的相互访问或刷新
代码经测试在IE5.5, IE6, IE7, IE8 Beta 2, FireFox, Opera, Chrome浏览器上测试通过！

分享到：

Visual Studio 2005/2008 调试出现“无法显 ... | 用jquery控制图片的最大宽度

2008-10-17 00:08
浏览 4028
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论