iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接，有明显不同的通信方式，同域下的数据交换和DOM元素互访就简单的多了，而跨域的则需要一些巧妙的方式来实现通信。
一、同域下父子页面的通信
父页面 Parent.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Parent.aspx.cs" Inherits="ReSenGuang.admin.iframeDemo.Parent" %>
<!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 runat="server">
<title>无标题页</title>
<script type="text/javascript">
function parentSay() {
alert("Parent.aspx------>I‘m at Parent.aspx");
}
function callChild()
{
//document.frames["myFrame"].window.say();//只适用于ie浏览器
myFrame.window.childSay();
myFrame.window.document.getElementById("button").value="我变了";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="调用Child.aspx中的函数childSay()" onclick="callChild()">
<iframe name="myFrame" src="Child.aspx"></iframe>
</div>
</form>
</body>
</html>
子页面 Child.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Child.aspx.cs" Inherits="ReSenGuang.admin.iframeDemo.Child" %>
<!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 runat="server">
<title>无标题页</title>
<script type="text/javascript">
function childSay() {
alert("Child.aspx--->I‘m at Child.aspx");
}
function callParent() {
parent.parentSay();
parent.window.document.getElementsByName("myFrame")[0].style.color = "red";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="button" type="button" value="调用Parent.aspx中的parentSay()函数" onclick="callParent()">
</div>
</form>
</body>
</html>
时间： 2024-08-03 07:05:37