面试题:使用过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实现数据加载,要改变数据,可以重新筛选一遍达到效果。