两子框架页iframe交互
以前解决这个小问题在网上查了一些方法，但效果不能很好。如是就动手写了一个小测试，主要是针对Asp.Net页面的框架交互。
我想大家看了界面就会明白页面结构的（如果有必要，那就是：Index.aspx里边有两个子框架，分别加载left.aspx与main.aspx页面）。
需要提一下的是：
（1）left.aspx页面里边第一个10是用html标签label呈现的，而第二10则是用asp.net控件Label呈现。
（2）main.aspx页面里边提供了两个按钮，分别用来改变left.aspx页面里边两个label的值。
首先，看看界面吧
（初始化界面）
（点击“直接修改”后的界面）
（点击“调用函数”后的界面）
接下来，该是看看代码的时候了（呵呵，其实很简单啦）
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="WebTest.Pages.IframeCommunication.Index"%>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title>我是index</title>
7 </head>
8 <body>
9 <form id="form1" runat="server">
10 <div>
11 <h1>我是Index.aspx</h1>
12 <div style="float:left;">
13 <iframe id="left" height="400px" width="300px" src="Left.aspx"></iframe>
14 </div>
15 <div>
16 <iframe id="main" height="400px" width="400px" src="Main.aspx"></iframe>
17 </div>
18 </div>
19 </form>
20 </body>
21 </html>
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Left.aspx.cs" Inherits="WebTest.Pages.IframeCommunication.Left"%>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title>我是left</title>
7 <script language="javascript" type="text/javascript">
8 function refreshNum(num) {
9 var lbl = document.getElementById('<% =lblAsp.ClientID %>');
10 if (lbl !=null) {
11 lbl.innerText = num;
12 }
13 }
14 </script>
15 </head>
16 <body>
17 <form id="form1" runat="server">
18 <div>
19 <h1>
20 我是Left.aspx</h1>
21 <label id="lblHtml">10</label>
22 <asp:Label runat="server" ID="lblAsp">10</asp:Label>
23 </div>
24 </form>
25 </body>
26 </html>
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="WebTest.Pages.IframeCommunication.Main"%>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title>我是main</title>
7 <script language="javascript" type="text/javascript">
8 var iniNum =10;
9 //直接修改框架内控件值
10 function commchange() {
11 var lbl = top.frames["left"].document.getElementById("lblHtml");
12 var num = lbl.innerText;
13 num--;
14 lbl.innerText = num;
15 }
16 //调用框架内js函数
17 function invokechange() {
18 var leftIf = top.frames["left"];
19 iniNum = iniNum -1;
20 leftIf.window.refreshNum(iniNum);
21 }
22 </script>
23 </head>
24 <body>
25 <form id="form1" runat="server">
26 <div>
27 <h1>
28 我是Main.aspx</h1>
29 <input type="button" id="btnCommunication" value="直接修改" onclick="commchange()"/>
30 <input type="button" id="btnInvoke" value="调用函数" onclick="invokechange()"/>
31 </div>
32 </form>
33 </body>
34 </html>
