网页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的高度自适应的问题。
猜你喜欢
- 1、先看效果:熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播。我认为使用图片轮播。第一可以给人以一种美观的感受,而不会显得网站那
- Oracle数据安全面面观 作者:づ★sl战神 随着计算机的普及以及网络的发展,数据库已经不再仅仅是那些程序员所专有的话题。而Oracle数
- 混编的含义有两种,一种是在python里面写C一种是C里面写python本文主要是进行简化,方便使用。###################
- OpenAI 是一个人工智能的工具包,包括神经网络、遗传算法和有限状态机等。使用python可以非常便捷的操作OpenAI的API。一下是O
- 使用opencv自带的模板匹配1、目标匹配函数:cv2.matchTemplate()res=cv2.matchTemplate(image
- strSourceFile = Server.MapPath(dataXML&"/Advertisement/"
- 使用session保持用户登陆连接在 view 中 login() 视图函数里增加如下语句不允许重复登录语句if request.sessi
- 学了几天正则,差不多该总结整理写成果了,之前就想写语法高亮匹配来着,不过水平不够,看着例子都不理解。那么我们来分析下两位大神 次碳酸钴 和
- pthon更换文档中某元素:with open('E:\\桌面\\train.txt', 'r') as f
- 本文实例讲述了Python框架Flask的基本数据库操作方法。分享给大家供大家参考,具体如下:数据库操作在web开发中扮演着一个很重要的角色
- 例:公司员工采取三个轮班制度:凌晨0:00到早上8:00为第一班,早上8:00到下午4:00为第二班,下午4:00到晚上12:00为第三班。
- 1. 扩展Tensor维度相信刚接触Pytorch的宝宝们,会遇到这样一个问题,输入的数据维度和实验需要维度不一致,输入的可能是2维数据或3
- 大家都知道,不同字符编码,其在内存占用的字节数不一样。如ASCII编码字符占用1个字节,U
- 本文实例讲述了Python3使用requests包抓取并保存网页源码的方法。分享给大家供大家参考,具体如下:使用Python 3的reque
- 最近使用python写一些东西,在参考资料的时候发现字典是没有顺序的,那么怎么样按照一定顺序访问字典呐,我找到了一个小方法:假设一个字典是:
- 观前提示:本篇内容为mysql数据库实验,代码内容经测试过,可能一小部分有所疏漏,也有会不符合每个人实验的要求的地方,因此以下内容建议仅做思
- 环境配置1:安装mysql,环境变量添加mysql的bin目录环境配置2:python安装MySQL-Python请根据自身操作系统下载安装
- 刚开始进入页面,当滚动向下超过原屏的时候。右侧会出现一个“返回顶部”的按钮。这个按钮会跟这网页一起向上向下,当滚动到顶部的时候。“返回顶部”
- 如下,以创建系统用户举例,配置文件配置普通用户信息,登入后切换root用户,创建一个指定名字和密码的系统用户:def create_user
- 简单生成器有许多优点。生成器除了能够用更自然的方法表达一类问题的流程之外,还极大地改善了许多效率不足之处。在 Python 中,