看到题目相信大家都已经知道这次要讲述什么内容了。关于Iframe刷页问题在网络中随便一搜索就能找到,我也是这么做的,可是搜索到的结果不一定就是自己的东西,因此我们应该学会总结。在这里我们就来总结一下关于Iframe刷页。
网络中的论坛或者是博客中大多数都是用的父页A.aspx和子页B.aspx形式来举例子的,这里我们的例子来用三个页面,一个父页A.aspx和两个子页B.aspx、C.aspx,可能大家会觉得,为何要用两个子页呢,用一个子页和两个子页有什么区别呢?因为我们这里要用到从子页C.aspx来刷新子页B.aspx。
下面先讲解第一种刷新方法:“重新定向到本页”
父页A.aspx的脚本如下:
子页B.aspx的脚本如下:
子页B.aspx的后台代码:
主要来关心一下Page_Load事件的代码,其他的在这里省略了
主要关心一下Button1的Click事件
再来看看第二种刷新方法:“重载页面”
子页C.aspx的后台代码:
主要关心一下Button2的Click事件
那么有人就会问了,如何在Iframe的页面中来刷新父页面呢?
我们仍然在C.aspx页面中做这个事情,加入“Button3”,Text属性为“重定向A.aspx页面”,C.aspx的脚本代码我们在这里省略。子页C.aspx的后台代码:
主要关心Button3的Click事件
网络中的论坛或者是博客中大多数都是用的父页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无后台代码。
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 >
子页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中的页面而言是需要这三行代码消除页面缓存的,否则呈现的是缓存中的数据页面——不值得一提,但还是提了,呵呵……)
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 >
子页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的脚本如下:
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 }
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的后台代码:
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 >
主要关心一下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页面
”。
2 {
3 this.Response.Write("<script>window.parent.document.getElementById('BIframe').src='B.aspx';</script>");
4 }
再来看看第二种刷新方法:“重载页面”
子页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页面
”。
2 {
3 this.Response.Write("<script>window.parent.document.frames.BIframe.RefreshmyForm();</script>");
4 }
那么有人就会问了,如何在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 }
2 {
3 this.Response.Write("<script>window.parent.location=window.parent.location;</script>");
4 }
在这里我们讲解了关于从Iframe的一个页面刷新另外一个Iframe页面的两种方法,以及简单说明了如何从Iframe的页面来刷新其所在的父页面。
本文转自刚刚博客园博客,原文链接:http://www.cnblogs.com/lijigang/archive/2007/05/18/751943.html,如需转载请自行联系原作者