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

最新推荐文章于 2023-07-11 14:16:59 发布

最新推荐文章于 2023-07-11 14:16:59 发布 · 139 阅读

文章标签：

#javascript #c# #ViewUI

本文介绍了使用Iframe实现页面刷新的两种方法：一是通过重定向到目标页面；二是通过调用页面内的JavaScript方法实现页面重载。同时，还介绍了如何从Iframe内部刷新父页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@Pagelanguage="c#"Codebehind="A.aspx.cs"AutoEventWireup="false"Inherits="Demo.A"%>
2

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
3

<HTML>
4

<HEAD>
5

<title>A</title>
6

<metacontent="MicrosoftVisualStudio.NET7.1"name="GENERATOR">
7

<metacontent="C#"name="CODE_LANGUAGE">
8

<metacontent="JavaScript"name="vs_defaultClientScript">
9

<metacontent="http://schemas.microsoft.com/intellisense/ie5"name="vs_targetSchema">
10

</HEAD>
11

<bodyMS_POSITIONING="GridLayout">
12

<formid="Form1"method="post"runat="server">
13

<iframeid="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

<iframeid="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"allowTransparencyDESIGNTIMEDRAGDROP="16"></iframe>
15

</form>
16

</body>
17

</HTML>

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

@Pagelanguage="c#"Codebehind="B.aspx.cs"AutoEventWireup="false"Inherits="Demo.B"%>
2

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
3

<HTML>
4

<HEAD>
5

<title>B</title>
6

<metacontent="MicrosoftVisualStudio.NET7.1"name="GENERATOR">
7

<metacontent="C#"name="CODE_LANGUAGE">
8

<metacontent="JavaScript"name="vs_defaultClientScript">
9

<metacontent="http://schemas.microsoft.com/intellisense/ie5"name="vs_targetSchema">
10

<metahttp-equiv="pragma"content="no-cache">
11

<metahttp-equiv="Cache-Control"content="no-cache,must-revalidate">
12

<basetarget="_self">
13

<scriptlanguage="javascript"type="text/javascript">

functionRefreshmyForm()
15

{
16

varmyForm=document.Form1;
17

myForm.submit();
18

}
19

</script>
20

</HEAD>
21

<bodyMS_POSITIONING="GridLayout">
22

<formid="Form1"method="post"runat="server">
23

<divid="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

<divid="LayersControlDiv"style="Z-INDEX:115;LEFT:0px;VISIBILITY:hidden;WIDTH:156px;CURSOR:hand;POSITION:absolute;TOP:26px;HEIGHT:360px">隐藏的Div层</div>
25

</form>
26

<scriptlanguage="javascript"type="text/javascript">

varmyDiv=document.getElementById("LayersControlDiv");
28

functionLayersDivOnClick()
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事件的代码，其他的在这里省略了

privatevoidPage_Load(objectsender,System.EventArgse)
2

{
3

stringmyStr=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的脚本如下：

@Pagelanguage="c#"Codebehind="C.aspx.cs"AutoEventWireup="false"Inherits="Demo.C"%>
2

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
3

<HTML>
4

<HEAD>
5

<title>C</title>
6

<metaname="GENERATOR"Content="MicrosoftVisualStudio.NET7.1">
7

<metaname="CODE_LANGUAGE"Content="C#">
8

<metaname="vs_defaultClientScript"content="JavaScript">
9

<metaname="vs_targetSchema"content="http://schemas.microsoft.com/intellisense/ie5">
10

<metahttp-equiv="pragma"content="no-cache">
11

<metahttp-equiv="Cache-Control"content="no-cache,must-revalidate">
12

<basetarget="_self">
13

<scriptlanguage="javascript"type="text/javascript">

functionRefreshmyForm()
15

{
16

varmyForm=document.Form1;
17

myForm.submit();
18

}
19

</script>
20

</HEAD>
21

<bodyMS_POSITIONING="GridLayout">
22

<formid="Form1"method="post"runat="server">
23

<divid="BtnDiv"style="Z-INDEX:107;LEFT:0px;WIDTH:254px;POSITION:absolute;TOP:0px;HEIGHT:290px;BACKGROUND-COLOR:#f2f9ff"align="center">
24

<asp:Buttonid="Button1"runat="server"Width="120px"Text="重定向B.aspx页面"></asp:Button>
25

<asp:Buttonid="Button2"runat="server"Width="108px"Text="重载B.aspx页面"></asp:Button></div>
26

</form>
27

</body>
28

</HTML>

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

privatevoidButton1_Click(objectsender,System.EventArgse)
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事件

privatevoidButton2_Click(objectsender,System.EventArgse)
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事件

privatevoidButton3_Click(objectsender,System.EventArgse)
2

{
3

this.Response.Write("<script>window.parent.location=window.parent.location;</script>");
4

}

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