zoukankan      html  css  js  c++  java
  • 两子框架页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>





  • 相关阅读:
    5.4.3 果园里的树
    5.3.2 字母重排
    5.3.1 6174问题
    Codeforces Round #253 (Div. 2), problem: (B)【字符串匹配】
    POJ1054 枚举【STL__binary_search()_的应用】
    432B
    0x3f3f3f3f...编程中无穷大常量的设置技巧
    2014年百度之星程序设计大赛 资格赛第一题 (longlong)
    Tarjan
    Dijkstra、Dij + heap、Floyd、SPFA、 SPFA + SLF Template
  • 原文地址:https://www.cnblogs.com/xrbx/p/2241551.html
Copyright © 2011-2022 走看看