Fork me on GitHub

iframe的知识点

前言

  • 有人说,iframe是能耗最高的一个元素,尽量减少使用。也有人说,iframe的安全性太差尽量减少使用
  • 尽管如此,但是iframe的强大功能是不容忽视的,而且现在不乏公司正在使用它。
  • <iframe>标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档
  • 所有的主流浏览器都支持<iframe>标签。我们可以把提示的文字放到 <iframe> 和 </iframe>里面,这样不支持 <iframe>的浏览器就会出现提示的文字

iframe 的使用

  • 通常我们使用iframe可以直接在iframe标签指定src,规定想要嵌套的页面URL就可以了。比如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- 
    <iframe> 标签规定一个内联框架
    这里写p 标签是为了看align的效果
    -->
    <p style="overflow: hidden;">这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。
    <iframe name="myiframe" id="myrame" src="external_file.html" frameborder="0" align="left" width="200" height="200" scrolling="no">
    <p>你的浏览器不支持iframe标签</p>
    </iframe>
    这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。</p>
  • iframe 的常用属性:

    • name:规定 <iframe> 的名称。
    • width:规定 <iframe> 的宽度。
    • height:规定 <iframe> 的高度。
    • src:规定在 <iframe> 中显示的文档的 URL。
    • frameborder:规定是否显示 <iframe> 周围的边框。 (0为无边框,1位有边框)。
    • align:规定如何根据周围的元素来对齐 <iframe>。 (left,right,top,middle,bottom)。
    • scrolling:规定是否在 <iframe> 中显示滚动条。 (yes,no,auto)
  • 上面代码中将 iframe 的src属性设置为自己本地的一个html页面。

iframe里面的内容获取

  • 示例:
    1
    2
    3
    4
    5
    var iframe = document.getElementById("myrame"); //获取iframe标签
    var iwindow = iframe.contentWindow; //获取iframe的window对象
    var idoc = iwindow.document; //获取iframe的document对象
    console.log(idoc.documentElement); //获取iframe的html
    console.log("body", idoc.body);

使用iframe的优缺点

  • iframe的优点
    ① iframe能够原封不动地把嵌入的网页展现出来
    ② 如果有多个网页调用iframe,只需要修改iframe的内容,就可以实现对调用iframe的每一个页面内容的更改,方便快捷
    ③ 网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用性
    ④ 如果遇到加载缓慢的第三方内容,如图标和广告等,可以用iframe来解决
  • iframe的缺点
    ① 会产生很多页面,不容易管理。
    ② 在几个框架中都出现上下、左右滚动条时,这些滚动条除了会挤占已经非常有限的页面空间外,还会分散访问者的注意力
    ③ 使用框架结构时,必须保证正确设置所有的导航链接,否则会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内,这种情况下访问者便被陷住了,因为此时他没有其他地点可去,导致链接死循环
    ④ 很多的移动设备(PDA手机)无法完全显示框架,设备兼容性差。
    ⑤ iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。
  • 注意:由于诸多的缺点,不符合标准网页设计的理念,已经被抛弃,目前的HTML5不再支持此标签

为什么少用iframe

  • iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级。
  • 使用 iframe 的页面一般不会包含太多 iframe,所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题onload 事件以及连接池(connection pool)
Iframes 阻塞页面加载
  • 及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止,告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后,它给用户的感觉就是这个网页非常慢。
  • window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里,通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况
唯一的连接池
  • 浏览器只能开少量的连接到web服务器。比较老的浏览器,包含 Internet Explorer 6 & 7 和 Firefox 2,只能对一个域名(hostname)同时打开两个连接。这个数量的限制在新版本的浏览器中有所提高。Safari 3+ 和 Opera 9+ 可同时对一个域名打开 4 个连接,Chrome 1+, IE 8 以及 Firefox 3 可以同时打开 6 个。你可以通过这篇文章查看具体的数据表:Roundup on Parallel Connections.
  • 有人可能希望 iframe 会有自己独立的连接池,但不是这样的。绝大部分浏览器,主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接,从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要,这当然是很好的。但通常情况下,iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。一种解决办法是,在主页面上重要的元素加载完毕后,再动态设置 iframe 的 SRC
  • 美国前 10 大网站都使用了 iframe。大部分情况下,他们用它来加载广告。这是可以理解的,也是一种符合逻辑的解决方案,用一种简单的办法来加载广告服务。但请记住,iframe 会给你的页面性能带来冲击。只要可能,不要使用 iframe。当确实需要时,谨慎的使用它们。
------ 本文结束 ------