• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    深入剖析HTML5 内联框架iFrame

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

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

    示例如下：

    /*

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

    */

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

    点击后

    完整代码如下

    index.html

    XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>index</title>  
    6. </head>  
    7. <!--注意，这里没有body元素-->  
    8. index   
    9. <a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>  
    10. <br/>  
    11. <iframe src="iframe1.html" frameborder="1" width="800px" height="800px"></iframe>  
    12. </html>  

    iframe1.html

    XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>iframe1</title>  
    6. </head>  
    7. <body bgcolor="red">  
    8. iFrame1   
    9. <a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>  
    10. <br/>  
    11. <iframe src="iframe2.html" frameborder="0" width="600px" height="600px"></iframe>  
    12. </body>  
    13. </html>  

    iframe2.html

    XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>iframe2</title>  
    6. </head>  
    7. <body bgcolor="green">  
    8. iFrame2   
    9. <a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>  
    10. <br />  
    11. <iframe src="iframe3.html" frameborder="0" width="400px" height="400px"></iframe>  
    12. </body>  
    13. </html>  

    iframe3.html

    XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>iframe3</title>  
    6. </head>  
    7. <body bgcolor="yellow">  
    8. iFrame3   
    9. <a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a></body>  
    10. </html>  

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

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

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

    上一篇：HTML5 Canvas绘制五星红旗
    下一篇：详解HTML5中rel属性的prefetch预加载功能使用
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    深入剖析HTML5 内联框架iFrame 深入,剖析,HTML5,内联,框架,