您好，欢迎来到步悠美食。
科技 教育 生活 旅游 时尚 美容 美食 健康 体育 游戏 汽车 家电
搜索
您的当前位置：首页深入剖析HTML5内联框架iFrame_html5教程技巧

深入剖析HTML5内联框架iFrame_html5教程技巧

来源：步悠美食
 由于现在frame和frameset很少使用，已经过时了，已经被div+CSS代替了，所以，这里只是举例说明一下，当下还在使用的内联框架iFrame

所谓的iFrame内联框架，我的理解就是在网页内部嵌套一个网页，并且可以一级一级地嵌套下去。

示例如下：

/*

示例由index.html和iframe1.html、iframe2.html、iframe3.html组成

*/

先上一张效果图，图片后面是完整代码。

点击后

完整代码如下

index.html

XML/HTML Code复制内容到剪贴板


    
 
  1.  
    2. 
 
  2.  
    3. 
 
  3.  
    4. 
 
  4.   
    5. 
 
  5.  index 
    6. 
 
  6.  
    7. 
 
  7.  
    8. 
 
  8. index 
    9. 
 
  9. czp_2016のblog 
    10. 
 

  10.  
    11. 
 
  11.  
    12. 
 
  12.  
    13. 





iframe1.html


XML/HTML Code复制内容到剪贴板


    
 
  1.  
    2. 
 
  2.  
    3. 
 
  3.  
    4. 
 
  4.   
    5. 
 
  5.  iframe1 
    6. 
 
  6.  
    7. 
 
  7.  
    8. 
 
  8. iFrame1 
    9. 
 
  9. czp_2016のblog 
    10. 
 

  10.  
    11. 
 
  11.  
    12. 
 
  12.  
    13. 
 
  13.  
    14. 





iframe2.html


XML/HTML Code复制内容到剪贴板


    
 
  1.  
    2. 
 
  2.  
    3. 
 
  3.  
    4. 
 
  4.   
    5. 
 
  5.  iframe2 
    6. 
 
  6.  
    7. 
 
  7.  
    8. 
 
  8. iFrame2 
    9. 
 
  9. czp_2016のblog 
    10. 
 

  10.  
    11. 
 
  11.  
    12. 
 
  12.  
    13. 
 
  13.  
    14. 





iframe3.html


XML/HTML Code复制内容到剪贴板


    
 
  1.  
    2. 
 
  2.  
    3. 
 
  3.  
    4. 
 
  4.   
    5. 
 
  5.  iframe3 
    6. 
 
  6.  
    7. 
 
  7.  
    8. 
 
  8. iFrame3 
    9. 
 
  9. czp_2016のblog 
    10. 
 
  10.  
    11. 





貌似各主流网站没有采用这种布局的，应用范围也比较少了。


以上这篇深入剖析HTML5 内联框架iFrame就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。


原文地址：http://www.cnblogs.com/czp2016/archive/2016/05/04/5450905.html

Copyright © 2019- buun.com.cn 版权所有

违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务