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

   

   

  ，要改变数据     

     

     

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


     



     



     



    。