iframe 替代（iframe的替代品）

时间2025-04-30 06:47:13分类IT科技浏览5146

导读： 面试题：使用过iframe框架，那你对于iframe框架的优缺点知道多少？并且由于iframe的一些缺点，国内外针对这个框架的替代品你知道有哪些呢？...

面试题：使用过iframe框架，那你对于iframe框架的优缺点知道多少？并且由于iframe的一些缺点，国内外针对这个框架的替代品你知道有哪些呢？

知识点1：iframe框架的优缺点？

优点：

1 、可以跨域请求其他网站，并将网站完整展示出来；

2 、典型系统结构可以提高代码的复用性；

3 、创建一个全新的独立的宿主环境，可以隔离或者访问原生接口及对象；

4 、模块分离，若多个页面运用同一个iframe ，则便于修改操作，如果网页为了统一样式而有相同的header和version ，可以写成一个page ，用iframe嵌套，这样可以增加代码的复用性；

5 、实现广告展示的一个解决方案，如果遇到加载缓慢的第三方内容，如图标或广告，这些问题可以由iframe来解决；

6 、若需要刷新iframe则只需要刷新框架内，不需要刷新整个页面；

7 、重新加载页面时，不需要重新加载整个页面，只需要重新加载页面中的一帧画面，减少了数据的传输，提高了网页的下载速度。

缺点：

1 、iframe会阻塞主页面的Onload事件，iframe加载完毕之后才会触发window.onload事件；iframe和主页面共享链接池，而浏览器对相同城的链接有限制，所以会影响页面的并行加载；使用iframe之前需要考虑这两个缺点，如果需要使用iframe ，最好是通过Javascript动态给iframe添加src属性值，这样可以绕开上面两个问题；

2 、不利于SEO ，代码复杂，搜索引擎的爬虫无法解读iframe的页面；

3 、加载了新页面，增加了css与js文件的请求，即额外增加了http请求，增加了服务器负担，对于大型网站不可取；

4 、很多的移动设备无法完全显示框架，设备兼容性差

5 、有时iframe由于页面挤占空间的原因出现滚动条，造成布局混乱

6、浏览器返回按钮不可用；

7 、页面样式调试比较麻烦，会有多个滚动条，而且会生成多个页面，不好打印；

知识点二：iframe框架的替代品？

1 、使用object标签替代

我们可以使用HTML中的object标签在网页中嵌入外部资源。我们可以使用标签在我们网页中显示另一个网页。object标签是HTML中iframe标签的替代品。我们可以使用标签来嵌入不同的多媒体组件，如图像、视频、音频等。object标签有一个属性data ，我们可以在其中定义要嵌入的网页的URL 。我们甚至可以使用width和height属性设置容器的宽度和高度。

2 、使用embed标签替代

embed标签类似于object标签，用于相同的目的，我们可以使用object标签在我们的网页中嵌入各种外部资源。我们可以嵌入PDF 、图像、音频、视频和网页等媒体。标签定义了一个容器，我们可以在其中嵌入我们想要的内容。object标签是一个自闭合标签。我们可以使用src属性来指定要嵌入的网页的URL 。该标签有一个type属性来指定要嵌入的内容类型。我们可以类似地定义高度和宽度，与object标签相同。注意：embed标签可用于flash文件或者在使用video标枪不成功的情况下使用，不兼容移动端，只支持pc端

3 、使用video标签替代

如果加载资源时视频的话可以使用video标签替代，video标签可以兼容移动端和PC端，支持Ogg\MPEG4\WebM三种格式的视频

4 、区别

1）embed是针对非IE的浏览器的媒体播放器；

2）object标签一般是用在IE中的，非IE很少支持object；

3）object与embed同时出现，为的就是兼容不同的浏览器；

4）video是html5出的一种新标准，但并不是所有的浏览器都支持；

5）video虽然号称可以支持三种媒体类型，但常用的只有mp4.

object和embed有一个特点，就是无法动态渲染，所以无法通过jQuery去操作dom实现数据加载，要改变数据，可以重新筛选一遍达到效果。