全面兼容的Iframe 与父页面交互操作

时间：2014-03-03 07:05:30 阅读：506 评论：0 收藏：0 [点我收藏+]

父页面 Father.htm 源码如下：

<!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>
<title>全面兼容的Iframe 与父页面交互操作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function fatherFunction() {
alert("我是父页面的方法,\n调用成功！");
}
/*
*父页面通过 iframe Name 调用子页面的函数或者获取子页面元素的内容
*/
function one() {
var ifreame = window.frames["childPage1"];
if (ifreame != null && ifreame != undefined) {
ifreame.childFunction();
}
}
function two() {
var ifreame = window.frames["childPage1"];
if (ifreame != null && ifreame != undefined) {
var myValue = ifreame.document.getElementById("childPage");
alert(myValue.innerHTML);
}
}
/*
*父页面通过 iframe Id 调用子页面的函数或者获取子页面元素的内容
*/
function three() {
var ifreame = window.top.document.getElementById("childPage2").contentWindow;
if (ifreame != null && ifreame != undefined) {
ifreame.childFunction();
}
}
function four() {
var ifreame = window.top.document.getElementById("childPage2").contentWindow;
if (ifreame != null && ifreame != undefined) {
var myValue = ifreame.document.getElementById("childPage");
alert(myValue.innerHTML);
}
}
</script>
</head>
<body style="margin: auto;">
<fieldset>
<legend>父页面通过 iframe Name 调用子页面的函数或者获取子页面元素的内容</legend>
<dl>
<dt>
<input type="button" value="通过ifrme Name 调用子页面的脚本" onclick="one();" />
<input type="button" value="通过ifrme Name 获取子页面元素的内容" onclick="two();" />
</dt>
<dt>
<div style="width: 100%; height: 250px;">
<iframe name="childPage1" src="Child1.htm" frameborder="0" scrolling="no" width="100%"
height="250"></iframe>
</div>
</dt>
</dl>
</fieldset>
<br />
<fieldset>
<legend>父页面通过 iframe Id 调用子页面的函数或者获取子页面元素的内容</legend>
<dl>
<dt>
<input type="button" value="通过ifrme Name 调用子页面的脚本" onclick="three();" />
<input type="button" value="通过ifrme Name 获取子页面元素的内容" onclick="four();" />
</dt>
<dt>
<div style="width: 100%; height: 250px;">
<iframe id="childPage2" src="Child2.htm" frameborder="0" scrolling="no" width="100%"
height="250"></iframe>
</div>
</dt>
</dl>
</fieldset>
</body>
</html>

嵌入的 iframe 子页面 Child1.htm 源码如下：

<!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>
<title>全面兼容的Iframe 与父页面交互操作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function childFunction() {
alert("我是子页面,\n我需要使用 Iframe Name 调用！");
}
</script>
</head>
<body style="margin: auto; background-color: Gray; color: Red;">
<input type="button" value="调用父页面的脚本" onclick="javascript:window.parent.fatherFunction();" /><br />
<div id="childPage">
我是子页面,我需要使用 Iframe Name 调用！</div>
</body>
</html>

嵌入的 iframe 子页面 Child2.htm 源码如下：

<!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>
<title>全面兼容的Iframe 与父页面交互操作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript">
function childFunction() {
alert("我是 iframe 嵌入的子页面，\n需要通过 Iframe Id 调用！");
}
</script>
</head>
<body style="margin: auto; background-color: Gray; color: Red;">
<input type="button" value="调用父页面的脚本" onclick="javascript:window.parent.fatherFunction();" /><br />
<div id="childPage">
我是 iframe 嵌入的子页面，需要通过Id调用！
</div>
</body>
</html>

效果图如下：

全面兼容的Iframe 与父页面交互操作,布布扣,bubuko.com

全面兼容的Iframe 与父页面交互操作

原文：http://www.cnblogs.com/web100/p/iframe-ok.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)