iframe标签在网页中可以创建一个内嵌框架,通过指定src属性来调用另一个网页文档的内容。和frameset一样,用它来对网页结构进行拆分以使网页的某些部分保持公用,但相对frameset对整个网页进行框架结构的拆分来说,iframe更加灵活,可以内嵌到网页的任意地方。由于 iframe使用上的这个特点,在一些网页中得到了大量运用,也导致了一些不适宜的滥用。网页教学网将分析一下iframe这个网页元素常见的几种使用方式。 iTbbo.com
1. 制作“无刷新”响应页面组件,作为异步交换数据的一种解决方案。这是早期不使用Ajax来异步发送请求的一种替代方法,通过在页面上设置不可见的iframe元素,并将其src属性指向需要发送请求的页面地址来发送请求,同域下可以再对返回的页面进行DOM解析来获取数据。另外一个好处在于绕开了Ajax的沙箱安全模型,可以顺利发送跨域请求获得数据,只是这种情况下取不到iframe的document对象。因为它的这个特点,在某些需要跨域请求数据的网页中依然有应用。这种无刷新是指在数据交换过程中父页面不刷新而继续对用户操作保持响应,实际进行数据交换而被锁定的是父页面上内嵌的iframe页面。这个内嵌iframe页面根据需要设置为可见或不可见都可以,并不会影响父页面中的其他元素对用户的响应。这种效果类似Ajax的无刷新,但可以看出其机制是完全不同的。即使Gmail作为Ajax应用的典范,也结合了很多iframe来实现其优越的性能与用户体验。 οnlοad=”document.f.q.focus();if(document.images)new Image().src=’/images/nav_logo4.png’” iTbbo.com 这样一句代码,加载的图片nav_logo4.png在首页并没有用到,但搜索结果列表等其他页面使用此图片的时候只需要从缓存读取,不需要重新下载了。
www.iTbbo.com
除了以上三种应用,对于iframe元素也常见一些不恰当的运用。例如在页面中嵌入过多的iframe框架,通过指定框架外链接标签的target 属性在点击时来更新iframe,这种用法和frameset类似,达到共用导航的目的。初衷是好,但其中的弊病也毋庸置疑。这样会导致一个页面请求过多,上文所提及的雅虎团队《Best Practices for Speeding Up Your Web Site》一文中就明确优化页面需要“使iframe的数量最小”,归纳了其三种弊病: www.iTbbo.com 1. 即使内容为空也会造成资源损耗(包括客户端、服务器端); bbs.iTbbo.com
在XHTML1.0的下一个版本HTML5中,由于frameset标签对网页可用性方面产生的负面影响,没有对它提供支持,这也从侧面说明一些问题。 www.iTbbo.com 另外,由于内嵌的iframe不能自动适应其内部内容大小,为了保持页面显示的完整性,还需要编写一段JavaScript脚本来根据iframe 内容的变化即时调整其大小。分散的多个请求再加上需要JavaScript脚本来修正更增加了多iframe页面系统运行的风险。那么,有没有什么好的方法能保持部分页面内容公用呢?服务器端早就给我们提供了解决方案,ASP中的include,PHP中的require方法,都是用来包含一段已有的代码到程序中,这样同样能实现页面的某个部分(如导航菜单、页脚)公用,但是运行之后作为一个完整的页面输出,有效地减少了客户端请求,同时也不存在 iframe的高度自适应的问题。
iTbbo.com
|