两子框架页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>





原文地址:https://www.cnblogs.com/xrbx/p/2241551.html