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

原创 2007年10月13日 08:21:00

      看到题目相信大家都已经知道这次要讲述什么内容了。关于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的页面来刷新其所在的父页面。 

作品说明:

作者:刚刚

最初本人发表本作品网址:http://www.cnblogs.com/lijigang/archive/2007/05/18/751943.html

 

郑重声明:

最近“刚刚”本人发现网络中有个别人将此文章当作原创发布在了自己在CSDN等网站上的博客里,现特别说明本文的原创地址与作者为上述“作品说明”,其他网站或个人博客中的原创标识都不足以相信为真的原创含义。请尊重网络作品转载等方式方法的著作版权!

开三个iframe不断刷访问量

写了一个lvyou.html,源码如下,用于刷访问量,还挺管用。 JS小伎俩 url = new Array(); ...
  • a49688448
  • a49688448
  • 2014年01月08日 18:45
  • 1253

iframe父子页面相互调用的js方法

转载来自:http://www.58lou.com/separticle.php?artid=179 当父页面和子页面都属于同一个域下,那么它们之间的js方法是可以相互调用的。在调用方法前指定f...
  • shehun11
  • shehun11
  • 2016年03月25日 12:21
  • 7014

iframe的常用方法

iframe的常用方法 定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 兼容 所有浏览器都支持 标签。但是在 HTML 4.1 Strict DT...
  • qq_35515563
  • qq_35515563
  • 2017年03月09日 17:32
  • 382

多iframe使用tab标签方式添加、删除、切换的处理实例

紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案      如果采用iframe来切换显示内容的方式来展现办公Web。那么需要解决几个问题   1.tab标签需要...
  • chen_hua89
  • chen_hua89
  • 2016年03月08日 09:25
  • 3568

jquery、js调用iframe父窗口与子窗口元素的方法

1、在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测试,且最好在iframe onload加载完毕后 dosomething...) js写法 a、同过cont...
  • zihuanzq_2014
  • zihuanzq_2014
  • 2016年11月13日 18:47
  • 1799

JS页面跳转+JS在Iframe页面跳转、刷新

window.location.href="jb51.jsp?backurl="+window.location.href;    第二种:  复制代码代码如下:   alert("返回")...
  • KevinwuwenboA
  • KevinwuwenboA
  • 2016年11月07日 22:33
  • 1803

Ionic 中使用iframe嵌入外网页面整理

一、Ionic是单页应用,有时候需要处理外网页面,可以使用iframe标签 特别说明: 1.目前来说如果iframe中的页面都是当前窗口的话建议使用 2.如果iframe中页面的链接有targe...
  • u011127019
  • u011127019
  • 2017年02月16日 14:58
  • 6324

JQueryiframe页面操作父页面中的元素与方法(实例讲解)

本文来自—->脚本之家:http://www.jb51.net/article/43406.htm这篇文章主要是对JQueryiframe页面操作父页面中的元素与方法进行了详细的分析介绍,需要的朋友可...
  • u013066244
  • u013066244
  • 2016年07月20日 10:01
  • 348

Vue 经验总结

1、
  • starwmx520
  • starwmx520
  • 2016年07月27日 21:41
  • 1910

使用iframe的好处与坏处详细比拼

一、使用iframe的坏处 1.搜索引擎的蜘蛛不会识别在iframe中被调用的图片、文本、url等内容的,因为该内容不属于该页面,只是访问的时候被临时的调用,而且在SEO建议中也有提到:“frame...
  • u013550565
  • u013550565
  • 2014年01月24日 10:57
  • 615
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Iframe的基础应用——关于Iframe刷页问题的两种方法
举报原因:
原因补充:

(最多只允许输入30个字)