面试题:使用过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属性设置容器的宽度和高度。

<object data="https://www.baidu.com"
width="800" 
height="800" 
type="text/html">
</object>

2、使用embed标签替代

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

<embed type="video/webm" src="video.mp4" width="10" height="10">

3、使用video标签替代

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

<video width="10" height="10" controls>
    <source src="movie.mp4" type="movie/mp4">
    <source src="movie.ogg" type="movie/ogg">
</video>

4、区别

1)embed是针对非IE的浏览器的媒体播放器;

2)object标签一般是用在IE中的,非IE很少支持object;

3)object与embed同时出现,为的就是兼容不同的浏览器;

4)video是html5出的一种新标准,但并不是所有的浏览器都支持;

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

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

发表回复