网页iframe元素应用浅析
作者:rukey67 来源:163 UED Team 发布时间:2009-04-11 18:11:00
iframe标签在网页中可以创建一个内嵌框架,通过指定src属性来调用另一个网页文档的内容。和frameset一样,用它来对网页结构进行拆分以使网页的某些部分保持公用,但相对frameset对整个网页进行框架结构的拆分来说,iframe更加灵活,可以内嵌到网页的任意地方。由于iframe使用上的这个特点,在一些网页中得到了大量运用,也导致了一些不适宜的滥用。下面将分析一下iframe这个网页元素常见的几种使用方式。
制作“无刷新”响应页面组件,作为异步交换数据的一种解决方案。这是早期不使用Ajax来异步发送请求的一种替代方法,通过在页面上设置不可见的iframe元素,并将其src属性指向需要发送请求的页面地址来发送请求,同域下可以再对返回的页面进行DOM解析来获取数据。另外一个好处在于绕开了Ajax的沙箱安全模型,可以顺利发送跨域请求获得数据,只是这种情况下取不到iframe的document对象。因为它的这个特点,在某些需要跨域请求数据的网页中依然有应用。这种无刷新是指在数据交换过程中父页面不刷新而继续对用户操作保持响应,实际进行数据交换而被锁定的是父页面上内嵌的iframe页面。这个内嵌iframe页面根据需要设置为可见或不可见都可以,并不会影响父页面中的其他元素对用户的响应。这种效果类似Ajax的无刷新,但可以看出其机制是完全不同的。即使Gmail作为Ajax应用的典范,也结合了很多iframe来实现其优越的性能与用户体验。另外举一个典型小应用如无刷新文件上传系统
优化页面的一种方式。使用iframe可以并行加载脚本,解决加载缓慢的第三方内容如图标和广告等的加载问题。Google的广告平台AdSense即通过iframe在用户的站点上投放广告分享收益,查看分析国内门户首页上的广告代码也能看到这类技术。也可用隐藏的iframe在网络压力较小的时候来预加载比较大的文件到缓存,以便其他页面使用。关于这几点雅虎团队的《Best Practices for Speeding Up Your Web Site》一文中有所论述。预加载的概念可以用firebug分析google首页,在body标签里可以看到:
onload=”document.f.q.focus();if(document.images)new Image().src=’/images/nav_logo4.png’”
这样一句代码,加载的图片nav_logo4.png在首页并没有用到,但搜索结果列表等其他页面使用此图片的时候只需要从缓存读取,不需要重新下载了。
作为针对IE6浏览器中浮动层遮不住select控件和flash元素的一种修正(hack)方式。Web2.0时代lightbox(又或thickbox)技术以它良好的体验与清新的视觉感受成为一种流行效果。这种技术实际上是用一个绝对定位的浮动层覆盖到原有页面上,用以呈现文本信息、图片、表单或其他任意页面元素,替代了早期web开发中常使用弹出浏览器窗口或者浏览器自身的消息、输入控件来与用户进行交互的方式。旧有方式中,弹出新窗口的脚本经常会被浏览器的广告拦截系统拦截,而浏览器自身的消息控件因为会打断浏览器进程,导致浏览器中本页面以及其他通过多标签进行浏览的网页全部被锁死而受到用户体验研究者的诟病。作为对自己有严格要求的一线web前端开发人员,在动手实现lightbox效果的过程中一定会遇到这个问题,绝对定位的层在IE6中遮盖不了网页上的select控件和flash,即使样式设置较高的z-index值也无济于事。这是因为select元素在IE6中是一个窗体级别的元素,它的优先级大大高于其他所有的html标签,只有同样窗体级别的iframe才能遮住它。因此开发者们研究出,把浮动层放到iframe中,或者在浮动层中放置一个iframe就可以解决此问题了。所幸此问题在IE6以后的IE升级版本中得到了修正,但对于还拥有50%+市场占有率的IE6来说(统计截至发文时间),这个解决方案依然有现实意义。
除了以上三种应用,对于iframe元素也常见一些不恰当的运用。例如在页面中嵌入过多的iframe框架,通过指定框架外链接标签的target属性在点击时来更新iframe,这种用法和frameset类似,达到共用导航的目的。初衷是好,但其中的弊病也毋庸置疑。这样会导致一个页面请求过多,上文所提及的雅虎团队《Best Practices for Speeding Up Your Web Site》一文中就明确优化页面需要“使iframe的数量最小”,归纳了其三种弊病:
即使内容为空也会造成资源损耗(包括客户端、服务器端);
阻滞页面onload事件触发(“Blocks page onload”,又有译作“会阻止页面加载”,此处存疑)
没有语义(SEO是网站营销的重要组成部分)
在XHTML1.0的下一个版本HTML5中,由于frameset标签对网页可用性方面产生的负面影响,没有对它提供支持,这也从侧面说明一些问题。
另外,由于内嵌的iframe不能自动适应其内部内容大小,为了保持页面显示的完整性,还需要编写一段JavaScript脚本来根据iframe内容的变化即时调整其大小。分散的多个请求再加上需要JavaScript脚本来修正更增加了多iframe页面系统运行的风险。那么,有没有什么好的方法能保持部分页面内容公用呢?服务器端早就给我们提供了解决方案,ASP中的include,PHP中的require方法,都是用来包含一段已有的代码到程序中,这样同样能实现页面的某个部分(如导航菜单、页脚)公用,但是运行之后作为一个完整的页面输出,有效地减少了客户端请求,同时也不存在iframe的高度自适应的问题。
猜你喜欢
- 定义总是很抽象。存储进程其实就是能完成一定操作的一组SQL语句,只不过这组语句是放在数据库中的(这里我们只谈SQL SERVER)。如果我们
- 因客户需求,要把数据库里的索引编号做成五位长度的,且能自动累加编号,我只会在SQL中使用Identity自动编号:Create Table
- 研究编码,得知GB2312编码与区位码的关系,尝试之后,得此程序。搜索,似乎没人写,故发此地。1.简述(1)GB2312标准的定义,其实就是
- 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的
- 以下为引用的内容:DROP PROCEDURE test_insert ;DELIMITER ;;CREATE PROCEDURE test
- 一.概念简介 脚本:script是使用一种特定的描述性语言,依据一定的格式编写的可执行文件,又称作宏或批处理文件。 二.背景 近来在Wind
- 对于个人站长来说,如何能使自己的网站与众不同、充满个性,一直是不懈努力的目标。除了尽量提高页面的视觉效
- 代码如下:'===================================== '获得文件后缀 '=====
- 如果我们的web应用有大量的异步请求,而这些异步请求是在web服务器认证的情况下,那当我们请求发生在服务器认证失效下,服务器自动302到登录
- 如果我们数据库的ID设置为varchar型的 在查询的时候order by id的话我们是不希望看到如下情况的。我们可以把varchar转换
- 前段时间在开发雨哲树网程序的时候,遇到需要转换地址中的参数,需要用到简单可逆运算的加密功能。在网上找了很多都不理想。因为我需要的这个可逆运算
- * 前,我在公司做设计,当时就已经做到技术总监,Photoshop是自学的,当时觉得全世界比我Photoshop强的人也不在多数。七年前,
- 下面是asp代码实现列出sql数据库中存储过程的功能,可自行添加其它功能:< HTML >< 
- 1、我的第一个个人主页一打开就是一张很眩的图片,图片上有个“进入”,点击后才算真正看到我的主页。现在回想起来那个时候这样做,大概是很想迅速展
- SVG是XML来描述二维图形的语言。SVG可以构造3种类型的图形对象:矢量图形、位图图象和文字。图形对象可被组化、样式化、变形和重组,包括图
- python使用utf8编码,mysql也是utf8编码,是什么问题?后来查了一下,使用一个简单的办法即可:vsql = "ins
- 我一直不很明白在中国国内流行的设计风格,象在国外的很多地方都有鲜明的设计大方向,比如韩国站点设计一般比较花哨,所以动画很多,我们常常看到韩国
- 现在正在搞三层开发,用ASP和VB6.0,但是现在苦于没有找到合适的方法来调试自己写的DLL文件,效率相当低。 &n
- 昨天在做mergeCSS的时候遇到两个正则匹配的问题,也花了不少的时间,最后在CSS森林群的 CE 同学帮助下,才完成了这俩正则,特别记录下
- 下面的这个函数实现的功能是列出某文件夹下的所有文件,以文件名字母排序,先数字后字母再到中文。<%