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

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

<%@ 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

</HEAD>
11

<body MS_POSITIONING="GridLayout">
12

<form id="Form1" method="post" runat="server">
13

</form>
16

</body>
17

</HTML>

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

<%@ 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

<base target="_self">
13

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

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

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

<%@ 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

<base target="_self">
13

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事件

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事件

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事件

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的页面来刷新其所在的父页面。

转载本文说明（以下简称本说明）：必须遵守《刚刚网络作品版权声明》，再转载。"本说明、作者、作者博客网址及作者博客坐落，本文中提及的各种说明、备注或附录性文字"必须被转载，且不得改变其原有内容和要表达的意图！
作者：刚刚作者博客网址：http://lijigang.cnblogs.com/ 作者博客坐落在博客园
把握现实生活，培养自身能力
掌握新型技术，提高自我力量

posted on 2007-05-18 21:33 刚刚阅读(6387) 评论(24) 编辑收藏所属分类: JavaScript技术