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属性设置容器的宽度和高度  


  


  


  


。

<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实现数据加载   

   

   

   

，要改变数据     

     

     

     

，可以重新筛选一遍达到效果


     



     



     



     
。