Iframe的基础应用——关于Iframe刷页问题的两种方法

看到题目相信大家都已经知道这次要讲述什么内容了。关于Iframe刷页问题在网络中随便一搜索就能找到，我也是这么做的，可是搜索到的结果不一定就是自己的东西，因此我们应该学会总结。在这里我们就来总结一下关于Iframe刷页。
      网络中的论坛或者是博客中大多数都是用的父页A.aspx和子页B.aspx形式来举例子的，这里我们的例子来用三个页面，一个父页A.aspx和两个子页B.aspx、C.aspx，可能大家会觉得，为何要用两个子页呢，用一个子页和两个子页有什么区别呢？因为我们这里要用到从子页C.aspx来刷新子页B.aspx。
      下面先讲解第一种刷新方法：“重新定向到本页”
父页A.aspx的脚本如下：

 1 <% @ Page language="c#" Codebehind="A.aspx.cs" AutoEventWireup="false" Inherits="Demo.A"  %>
 2 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
 3 < HTML >
 4      < HEAD >
 5          < title > A </ title >
 6          < meta  content ="Microsoft Visual Studio .NET 7.1"  name ="GENERATOR" >
 7          < meta  content ="C#"  name ="CODE_LANGUAGE" >
 8          < meta  content ="JavaScript"  name ="vs_defaultClientScript" >
 9          < meta  content ="http://schemas.microsoft.com/intellisense/ie5"  name ="vs_targetSchema" >
10      </ HEAD >
11      < body  MS_POSITIONING ="GridLayout" >
12          < form  id ="Form1"  method ="post"  runat ="server" >
13              < iframe  id ="BIframe"  name ="BIframe"  style ="Z-INDEX: 102; LEFT: 0px; WIDTH: 748px; POSITION: absolute; TOP: 0px; HEIGHT: 511px"  marginWidth ="0"  marginHeight ="0"  src ="B.aspx"  frameBorder ="0"  scrolling ="no"  allowTransparency ></ iframe >
14              < iframe  id ="CIframe"  name ="CIframe"  style ="Z-INDEX: 105; LEFT: 750px; OVERFLOW: hidden; WIDTH: 254px; POSITION: absolute; TOP: 0px; HEIGHT: 511px"  marginWidth ="0"  marginHeight ="0"  src ="C.aspx"  frameBorder ="0"     scrolling ="no"  allowTransparency DESIGNTIMEDRAGDROP ="16" ></ iframe >
15          </ form >
16      </ body >
17 </ HTML >

父页A.aspx无后台代码。
子页B.aspx的脚本如下：

 1 <% @ Page language="c#" Codebehind="B.aspx.cs" AutoEventWireup="false" Inherits="Demo.B"  %>
 2 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
 3 < HTML >
 4      < HEAD >
 5          < title > B </ title >
 6          < meta  content ="Microsoft Visual Studio .NET 7.1"  name ="GENERATOR" >
 7          < meta  content ="C#"  name ="CODE_LANGUAGE" >
 8          < meta  content ="JavaScript"  name ="vs_defaultClientScript" >
 9          < meta  content ="http://schemas.microsoft.com/intellisense/ie5"  name ="vs_targetSchema" >
10          < meta  http-equiv ="pragma"  content ="no-cache" >
11          < meta  http-equiv ="Cache-Control"  content ="no-cache, must-revalidate" >
12          < base  target ="_self" >
13          < script  language ="javascript"  type ="text/javascript" >
14            function RefreshmyForm()
15            {
16                var myForm = document.Form1;
17                myForm.submit();
18            }
19         </ script >
20      </ HEAD >
21      < body  MS_POSITIONING ="GridLayout" >
22          < form  id ="Form1"  method ="post"  runat ="server" >
23              < div  id ="LayersDiv"  style ="FONT-SIZE: 9pt; Z-INDEX: 112; LEFT: 0px; WIDTH: 175px; CURSOR: hand; COLOR: navy; PADDING-TOP: 6px; FONT-STYLE: normal; FONT-FAMILY: 宋体; POSITION: absolute; TOP: 0px; HEIGHT: 26px; TEXT-ALIGN: center; FONT-VARIANT: normal"  onclick ="LayersDivOnClick();"  align ="left" > Div层显示控制 </ div >
24              < div  id ="LayersControlDiv"  style ="Z-INDEX: 115; LEFT: 0px; VISIBILITY: hidden; WIDTH: 156px; CURSOR: hand; POSITION: absolute; TOP: 26px; HEIGHT: 360px" > 隐藏的Div层 </ div >
25          </ form >
26          < script  language ="javascript"  type ="text/javascript" >
27        var myDiv = document.getElementById("LayersControlDiv");
28        function LayersDivOnClick()
29        {
30            if(myDiv.style.visibility == "hidden")
31            {
32                myDiv.style.visibility = "visible";
33            }
34            else
35            {
36                myDiv.style.visibility = "hidden";
37            }
38        }
39         </ script >
40      </ body >
41 </ HTML >

(这里有一个控制Div层显示的JavaScript的方法从第26行开始的，以及第10、11、12行标记是为了去处页面缓存的，当某个aspx页面作为弹出页面或者嵌入在Iframe中的页面而言是需要这三行代码消除页面缓存的，否则呈现的是缓存中的数据页面——不值得一提，但还是提了，呵呵……)
子页B.aspx的后台代码：
主要来关心一下Page_Load事件的代码，其他的在这里省略了

 1          private   void  Page_Load( object  sender, System.EventArgs e)
 2          {
 3            string myStr = String.Empty;
 4            if(!this.Page.IsPostBack)
 5            {
 6                myStr="这是重定向刷新B.aspx页面";
 7                this.Response.Write("<script>alert('" + myStr + "');</script>");
 8            }
 9            else
10            {
11                myStr="这是重载本页后刷新B.aspx页面";
12                this.Response.Write("<script>alert('" + myStr + "');</script>");
13            }
14        }

下面我们在C.aspx页面中放置两个服务器控件“Button”(Button1和Button2)，Text属性分别为“重定向B.aspx页面”和“重载B.aspx页面”，那么子页C.aspx的脚本如下：

 1 <% @ Page language="c#" Codebehind="C.aspx.cs" AutoEventWireup="false" Inherits="Demo.C"  %>
 2 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
 3 < HTML >
 4      < HEAD >
 5          < title > C </ title >
 6          < meta  name ="GENERATOR"  Content ="Microsoft Visual Studio .NET 7.1" >
 7          < meta  name ="CODE_LANGUAGE"  Content ="C#" >
 8          < meta  name ="vs_defaultClientScript"  content ="JavaScript" >
 9          < meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >
10          < meta  http-equiv ="pragma"  content ="no-cache" >
11          < meta  http-equiv ="Cache-Control"  content ="no-cache, must-revalidate" >
12          < base  target ="_self" >
13          < script  language ="javascript"  type ="text/javascript" >
14            function RefreshmyForm()
15            {
16                var myForm = document.Form1;
17                myForm.submit();
18            }
19         </ script >
20      </ HEAD >
21      < body  MS_POSITIONING ="GridLayout" >
22          < form  id ="Form1"  method ="post"  runat ="server" >
23              < div  id ="BtnDiv"  style ="Z-INDEX: 107; LEFT: 0px; WIDTH: 254px; POSITION: absolute; TOP: 0px; HEIGHT: 290px; BACKGROUND-COLOR: #f2f9ff"  align ="center" >
24                  < asp:Button  id ="Button1"  runat ="server"  Width ="120px"  Text ="重定向B.aspx页面" ></ asp:Button >
25                  < asp:Button  id ="Button2"  runat ="server"  Width ="108px"  Text ="重载B.aspx页面" ></ asp:Button ></ div >
26          </ form >
27    </ body >
28 </ HTML >

子页C.aspx的后台代码：
主要关心一下Button1的Click事件

1          private   void  Button1_Click( object  sender, System.EventArgs e)
2          {
3            this.Response.Write("<script>window.parent.document.getElementById('BIframe').src='B.aspx';</script>");
4        }

此时启动调试程序(当然将A.aspx设为启动页后调试)，点击“Button1”，弹出的消息框永远是“ 这是重定向刷新B.aspx页面”。

      再来看看第二种刷新方法：“重载页面”
子页C.aspx的后台代码：
主要关心一下Button2的Click事件

1          private   void  Button2_Click( object  sender, System.EventArgs e)
2          {
3            this.Response.Write("<script>window.parent.document.frames.BIframe.RefreshmyForm();</script>");
4        }

这里我们调用了B.aspx页面的JavaScript的一个回传页面的方法RefreshmyForm()，此时启动调试程序，点击“Button2”，弹出的消息框永远是“ 这是重载本页后刷新B.aspx页面”。

那么有人就会问了，如何在Iframe的页面中来刷新父页面呢？
我们仍然在C.aspx页面中做这个事情，加入“Button3”，Text属性为“重定向A.aspx页面”，C.aspx的脚本代码我们在这里省略。子页C.aspx的后台代码：
主要关心Button3的Click事件

1          private   void  Button3_Click( object  sender, System.EventArgs e)
2          {
3            this.Response.Write("<script>window.parent.location=window.parent.location;</script>");
4        }

      在这里我们讲解了关于从Iframe的一个页面刷新另外一个Iframe页面的两种方法，以及简单说明了如何从Iframe的页面来刷新其所在的父页面。