替代iframe的最好方法，iframe过时了吗

编程之家2026-05-201095次浏览

其实替代iframe的最好方法的问题并不复杂，但是又很多的朋友都不太了解iframe过时了吗，因此呢，今天小编就来为大家分享替代iframe的最好方法的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

开发中iFrame表单提交的古怪问题解决

微软的 NET Framework自带了Ajax框架将以往传统的ASP NET开发带入了一个全新的Ajax NET开发时代我们除了在页面上引入ScriptManager控件用以在客户端注册功能丰富的Ajax框架脚本外这个庞大的框架还提供了诸多功能强大的Ajax控件例如著名的UpdatePanel ModalPopupExtender Rating等控件 Ajax框架和控件的引入大大简化了开发人员的开发任务同时也给用户带来了全新的Web体验但是我们在使用复杂的框架提供的脚本时也常常会遇到这样或那样的问题有很多问题相信不少开发人员都能独立解决不过有些复杂的问题还真是很伤脑筋

本来在MOSS中使用Ajax开发就已经不是一件轻易的事情或许高手们觉得这没有什么是的！我们在Google上会搜到很多介绍这方面的文章而且配置步骤都写得非常详细按照前辈们的经验只要认真按照步骤将环境配置好一般都是没有什么问题的在MOSS中开发Ajax应用程序就如同简单的Ajax网页一样只是部署的时候稍微要麻烦一些这里我不想详细讲解在MOSS中如何进行Ajax开发只是想说一说前段时间在MOSS开发中因为Ajax框架所引起的一个非常怪异的问题一直困扰了我好几天不过最终算是委曲求全得找到了一个替代的解决办法至于会不会引起其它的什么问题读者也可以帮我分析一下

前不久我写了一篇有关在FireFox中通过脚本获取客户端本地所选文件路径的文章里面介绍了通过客户端上传文件时如果通过javascript得到文件的本地路径事实上在真正的文件上传过程中得到文件的客户端路径意义是不大的除非我们需要实现如图片本地预览的功能否则我们一般都可以通过Form的Post方法得到要上传的文件在C#一般都是这样的

protected void Button _Click(object sender EventArgs e){ HttpFileCollection files= Request Files; if(files!= null&& files Count>){ for(int i=; i< files Count; i++){// TODO something}}}设置Form的method属性为post并设置enctype为mulipart/form data当页面提交时在服务端通过Request Files方法即可得到上传文件的对象集合非常简单我们根本不需要在客户端通过javascript得到文件的路径不过这里有一个限制那就是页面必须post到服务端才能得到要上传的文件也就是说我们不能通过javascript方式在页面无刷新的情况下将文件上传到服务器这也是Ajax唯一不能做到的一件事情不过我们通过一个比较老旧的技术可以避开这个问题那就是在页面上使用隐藏的iFrame在页面提交前将Form的target指向这个隐藏的iFrame页面提交时iFrame会被刷新提交从而避免了整个页面被刷新

事实上在Ajax兴起前很多无刷新的页面几乎都是通过这种方式来实现的 iFrame可以提交数据而且还避免了网页的整体刷新在Ajax兴起后 iFrame似乎很少再被人们提起但是有一个例外

那就是文件上传！我们可以去当今比较流行的网站考察一下像邮箱 Gmail等都无一例外地使用了iFrame上传文件我们可以将上面代码中的HTML部分稍作修改就可以实现使用iFrame上传文件的功能

<body><form id= form runat= server target= ifu method= post enctype= multipart/form data><iframe frameborder= id= ifu name= ifu></iframe><input id= File name= mtfile type= file/><asp:Button ID= Button runat= server Text= Button OnClick= Button _Click/></form></body>后台代码不变只是在Form上加了一个target属性用来指向iFrame当页面提交时会自动提交iFrame对象而不会将Form本身提交当遇到页面上还有其它表单需要提交时我们可以这样做先在提交按钮的客户端事件上将Form的target指向隐藏的iFrame然后返回True提交表单这时iFrame会被提交在服务端处理完数据保存后注册一段脚本用来将iFrame的父页面中Form的target改回自身这样就可以模拟一次iFrame提交而不会影响到页面上其它的功能我们只是在页面需要被提交时才去修改Form的target属性提交完后再改回来

这看起来似乎是一个很不错的主意看看代码吧！

protected void Button _Click(object sender EventArgs e){ HttpFileCollection files= Request Files; if(files!= null&& files Count>){ for(int i=; i< files Count; i++){//TODO something}} string script= alert({});window parent document forms[ form ] target= _self;; ClientScript RegisterClientScriptBlock(this Page this GetType() string Empty string Format(script Save Successfully!) true);}

尽管我们在页面上使用Ajax控件该方法仍然会奏效需要说明一点就是上传文件的功能是不能在UploadPanel控件中使用的否则功能会失效因为文件上传必须刷新页面除非我们使用iFrame提交表单如果非要在UpdatePanel控件中完成文件上传功能那必须设置UpdatePanel控件的PostBackTrigger属性将触发事件的控件添加到PostBackTrigger中如

<asp:UpdatePanel ID= update runat= server UpdateMode= Conditional><ContentTemplate><input id= File name= mtfile type= file/><asp:Button ID= btSave runat= server Text= Save onclick= btSave_Click/></ContentTemplate><Triggers><asp:PostBackTrigger ControlID= btSave/></Triggers></asp:UpdatePanel>

这将导致页面回传 UpdatePanel控件的意义也就失去了在页面上放置隐藏的iFrame按照前面介绍的方法通过javascript动态去修改Form的target属性提交iFrame可以实现类似于Ajax方式的文件上传功能其实页面同样被刷新了只是刷新的是隐藏的iFrame用户不会有什么感觉

前面说了这么多只是想说说我所遇到的问题的背景现在步入正题！

在MOSS中开发页面和普通的ASP NET页面基本没有什么不同主要就是部署的时候会有一些麻烦那么按照前面介绍的方法将编写好的页面部署到站点上运行时我发现了一个奇怪的问题那就是第一次按钮触发事件的时候服务端可以正确响应并且是通过iFrame提交过来的但是从第二次开始就需要等待十几秒的时间按钮才能再次被触发一开始我以为是iFrame在被提交后没有响应完毕来不及处理第二次请求后来通过设置断点和插入调试脚本进行测试发现iFrame已经完全响应完毕按钮还是不能被点击（这里说的按钮不能被点击是指Button不能响应服务端事件）

究竟发生了什么问题？

在 NET时代我们通常会遇到按钮的事件丢失等问题但这是在 NET的环境下根本不存在这种问题况且按钮在第一次的时候是可以被点击的程序一直处于运行状态没有人修改过代码让我非常奇怪！这个问题我反复调试并采用了很多不同的方法去尝试但是问题依旧如查看页面上其它部分可能导致的脚本干扰 setInterval方法的使用是否会导致程序处于等待状态（事实上这个根本不可能）

去掉所有可能导致此问题的控件和代码等等天啊！我几乎尝尽了所有能够想到的办法但是这块大石头依然纹丝不动我崩溃了！！

过了一个周末在家睡了两天脑海中一直想的就是究竟是什么原因导致了按钮的事件不能被触发我也尝试过在FireFox下利用FireBug跟踪按钮的客户端代码执行情况没有什么结果周一上班的时候突然想到用排除法来验证一下看看究竟是哪部分代码出现了问题因为之前我在本地创建的工程中使用了iFrame提交表单并且利用javascript在页面往返服务器的过程中动态修改了Form的target属性并没有发现按钮事件不能被触发的问题说明问题不是出在我所写的代码中我在MOSS站点中创建了一个功能一样的页面上面只有非常简单的几行代码然后编译部署激活特定的Feature访问页面简单看了一下功能很正常说明这种方法在MOSS下是可以正常使用的并没有之前假象的会受到MOSS本身机制的影响

生产环境中的页面要稍微复杂一些里面除了一些必须的功能和UserControl外整个页面是继承自一个公共的模板页难道问题出在模板页上？我又仔细看了看模板页中的代码几乎尝试着将模板页中所有的控件都删除了但是问题依然没有解决一身冷汗啊一上午的时间就这么让我浪费了做过MOSS项目的朋友可能会比较清楚在MOSS上开发项目复杂的并不是如何去写代码而是部署和调试经常大把的时间都浪费在这个上面更何况我为了测试这个问题产生的原因还要新建页面重新部署站点然后调试代码光这个过程就比较繁琐了

反正已经开始做了午饭过后我打算彻底搞定它问题既然不是出在页面本身那一定是出在模板页上因为之前没加模板页的时候是可以的后来将页面继承自模板页后问题就来了在FireFox中查看页面的源代码仔细查看生成的HTML和脚本发现在Body和Form标签上有两个脚本事件不知道是干什么用的很好奇问了一下老大他说这是MOSS在新建模板页时自动加上的没有谁刻意去加它代码片段如下

<body onload= javascript:_spBodyOnLoadWrapper();><form id= Form runat= server onsubmit= return _spFormOnSubmitWrapper(); method= post enctype= multipart/form data>我尝试着将这两个事件取消掉然后重新部署运行程序哈哈！终于可以了那个按钮的事件再也没有丢失过可以一直被点击而不会出现不响应的情况其实罪魁祸首的就是form的onsubmit事件中的_spFormOnSubmitWrapper方法取消它就可以解决问题

但是问题马上又来了既然这个事件是MOSS自动加上的那肯定有它的用途我们不能随意就将它删掉说不定以后哪里就会出问题（虽然我到后来也不太清楚这个函数究竟是用来干什么的）那么只能曲线救国了用FireBug看看它的具体代码吧顺便跟了一下

//aspnetForm为Form的客户端name iframeHidden为隐藏的iFrame的namedocument forms[ aspnetForm ] target= iframeHidden;_spFormOnSubmitCalled= false;return true;然后服务端返回的时候再将form的target改回_self这样就可以了！

我不知道MOSS自动加上的那个Form事件是用来干什么的但至少我让_spFormOnSubmitCalled变量的值为false可以导致按钮的事件被触发并且可以实现我预期的效果

因为我在页面提交成功后会整个刷新页面所以也不用担心修改这个值后会带来什么样的后果最后来看一下服务器端要注册的脚本

private const string scriptOK=@ alert({}); window parent location href+=#; window parent location reload();;private const string scriptFailed=@ alert({}); window parent document forms[ aspnetForm ] target= _self;;分为两种如果成功则重新刷新整个页面如果失败则修改父页面Form的target属性的值为_self你可能会问我为什么要将父页面的location href加上一个#这主要是为了解决在FireFox下通过iFrame提交表单并重新刷新整个页面时出现是否重新提交数据的提示（这个问题在IE下不会出现）浏览器只认URL我们稍微修改一下URL的内容只要地址不变重新刷新页面时就不会出现是否重新提交数据的提示了

到目前为止我将我的代码做了这样的修改不知道会不会遇到什么问题写这篇文章的目的有两个一是记录一下自己解决这个问题的过程二是想告诉各位正在做MOSS开发的朋友如果遇到通过Ajax方式无法触发服务器端事件的问题时不妨认真检查检查客户端生成的HTML和脚本找找原因在哪里

lishixinzhi/Article/program/net/201311/12554

iframe 属性

iframe元素的功能是在一个html内嵌一个文档，创建一个浮动的帧。iframe可以嵌在网页中的任意部分

name：内嵌帧名称

width：内嵌帧宽度(可用像素值或百分比)

height：内嵌帧高度(可用像素值或百分比)

frameborder：内嵌帧边框

marginwidth：帧内文本的左右页边距

marginheight：帧内文本的上下页边距

scrolling：是否出现滚动条(“auto”为自动，“yes”为显示，“no”为不显示)

src：内嵌入文件的地址

style：内嵌文档的样式(如设置文档背景等)

allowtransparency：是否允许透明

iframe还有一个很有用的用法：强调页面的某项内容

先把要强调显示的内容另存为一个文件，如first.htm，然后通过一个预载页index.htm，内容如下：

〈meta http-equiv="refresh" content="3,url=index2.htm"〉

〈body〉

页面加载中，请稍候……〈iframe src="first.htm" style="display:none"〉〈/iframe〉

〈/body〉

主文件index2.htm

〈body〉

〈iframe src="first.htm"加入其他属性限制〉〈/iframe〉

〈/body〉

解释成“浏览器中的浏览器“很是恰当

<IFRAME>用于设置文本或图形的浮动图文框或容器。

BORDER

设定围绕图文框的边缘宽度

FRAMEBODER

设置边框是不否为3维（0=否，1=是）

HEIGHT,WIDTH

设质边框的宽度和高度

SCROLLING

是否有滚动条（YES,NO,AUTO)

SRC

指定IFRAME调用的文件或图片(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*)

-------------------------------------------------------------

“画中画”效果--谈IFRAME标签的使用

纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目图片，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效应的需要，本无可厚非，可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了，有没有办法，让这些雷同的东西一次下载后就不用再下载，而只下载那些内容有变化区域的网页内容呢？

答案很肯定：应用Iframe标记！

一、Iframe标记的使用

提起Iframe，可能你早已将之扔到“被遗忘的角落”了，不过，说起其兄弟Frame就不会陌生了。Frame标记即帧标记，我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个“上一节“、“下一节“的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌烦了，这时突发奇想，如果有一种方法让页面其它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改变教程内容部分，其它保持不变，这样，一是省时，另则以后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。 Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。

现在我们谈一下Iframe标记的使用。

Iframe标记的使用格式是:

src：文件的路径，既可是HTML文件，也可以是文本、ASP等；

width、height："画中画"区域的宽与高；

scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;

FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。

比如:

二、父窗体与浮动帧之间的相互控制在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。

1、在父窗体中访问并控制子窗体中的对象

在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。

现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。

比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：

test.htm文件代码为:

<html>

<body>

<h1 id="myH1">hello,my boy</h1>

</body>

</html>

如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:

document.myH1.innerText="hello,my dear"(其中，document可省)

在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。

2、在子窗体中访问并控制父窗体中对象

在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。

如example.htm：

<html>

<h1 id="myH2">hello,my wife</h1>

</body>

</html>

如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：

parent.myH2.innerText="hello,my friend"

这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。

试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。

有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己(网站)着了想，又为网友节省了网费，何乐而不为？

例子：

2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

用了iframe后发现滚动条不漂亮想用2个图片来代替↑↓

应该怎么实现呢？

回答：

用下列代码替换网页的<title>..</title>

function scroll(n)

{temp=n;

Out1.scrollTop=Out1.scrollTop+temp;

if(temp==0) return;

setTimeout("scroll(temp)",80);

}

</SCRIPT>

<TR>

文字<BR>文字<BR>

文字<BR>

文字

<BR>

</DIV>

</TD>

</TR>

<TR>

</TR>

</TABLE>

内框架Iframe的使用

使用Iframe可以在一人表格内调用一个外部文件，是非常有用的。本网站在很多页面上都使用了iframe效果。

现在我们学一下Iframe标记的使用。

Iframe标记的使用格式是:

src：文件的路径，既可是HTML文件，也可以是文本、ASP等；

width、height："内部框架"区域的宽与高；

scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;

FrameBorder：区域边框的宽度，为了让“内部框架“与邻近的内容相融合，常设置为0。

name:框架的名字，用来进行识别。

比如:

当你想用父框架控制内部框架时，可以使用： target="框架的名字"来控制。

Dreamweaver MX进阶教程（一）可视化操作iframe

iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。

从Dreamweaver MX开始，可以可视化操作iframe，不再需要第三方插件。

插入iframe

1.点击“插入面板”的“标签选择器”

.在“标签选择器”对话框中，选择iframe标签，点击“插入”按钮。

.在“标签编辑器-Iframe”对话框中，根据面板提示操作。最基本的两项是“源”和“名称”。

源：点击“浏览”按钮，选择要出现在iframe中的网页文件。

名称：输入的名称，将作为这个iframe的标识，其它的链接如果要在这个iframe打开，网页打开“目标”就需要输入此“名称”。

宽度和高度：可以输入象素值，也可以输入100％。

边距宽度和边距高度：设置和外围标签的边距。

对齐：设置对齐方式。

滚动：设置是否允许出现滚动条。

显示边框：选择是否出现边框。

设置链接在某个iframe中打开

选中链接，在属性面板中的“目标”项，手工输入目标iframe的“名称”。

iframe透明

为了使iframe内容和网页背景相同，需要使iframe透明。

在“标签编辑器-Iframe”对话框中，选择“浏览器特定的”项目卡，选中“允许透明”。

框架包含应用程序

在“标签编辑器-Iframe”对话框中，选择“浏览器特定的”项目卡，选中“框架包含应用程序”。

Iframe的替代内容

在某些不支持iframe的浏览器中，iframe将不能显示。这时需要输入替代内容。

在“标签编辑器-Iframe”对话框中，选择“替代内容”选项，在替代内容中输入代码或者文字。

关于flash总是在最上层,挡住了层,解决方法。

解决方法：通过调整Flash的wmode参数或使用iframe技术实现层叠控制

Flash元素默认使用“写屏技术”（windowed mode），导致其始终覆盖其他HTML层。以下是两种有效解决方案：

方法1：修改Flash的wmode参数（推荐）在嵌入Flash的代码中添加<param name="wmode" value="Opaque">（或 value="Transparent"），强制Flash置于其他元素下方。

示例代码：

Opaque：Flash不透明，允许其他元素覆盖（需设置层的z-index高于Flash）。Transparent：Flash背景透明，同样可被其他元素覆盖。优点：

直接解决Flash层叠问题，兼容性较好（支持IE及现代浏览器）。无需额外HTML结构，代码简洁。方法2：使用iframe遮挡（兼容旧版IE）若无法修改Flash参数（如第三方嵌入代码），可通过插入一个透明的iframe覆盖Flash，提升目标层的优先级。

示例代码：

<div style="position: relative;"><object><param name="movie" value="your_flash.swf"><embed src="your_flash.swf"></object><iframe src="javascript:false" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; filter: alpha(opacity=0); border: none;"></iframe><div style="position: relative; z-index: 2;">覆盖内容</div></div>关键点：

iframe的 z-index需高于Flash，目标层的 z-index需高于iframe。设置 opacity: 0和 border: none确保iframe不可见。缺点：

旧版IE中可能仍存在点击穿透问题（需额外JS处理）。结构复杂，可能影响页面性能。注意事项浏览器兼容性：

wmode="Opaque"在IE6-8中可能需配合 hasLayout触发（如设置 width/height）。

iframe方案在IE7及以下需验证点击事件是否正常触发。

性能优化：

避免过多透明层叠，可能增加渲染负担。

替代方案：

现代开发中，建议用HTML5替代Flash（如<video>或Canvas），彻底避免层叠问题。

总结：优先使用 wmode="Opaque"参数，简单高效；若受限于嵌入代码，再考虑iframe遮挡方案。

好了，文章到此结束，希望可以帮助到大家。

实时数据库排名，中国数据库官网excel函数公式怎么输入，excel出入库管理表格