首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

深入剖析HTML5 内联框架iFrame

Posted in HTML / CSS onMay 04, 2016

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

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

示例如下：

/*

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

*/

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

深入剖析HTML5 内联框架iFrame

点击后

深入剖析HTML5 内联框架iFrame

完整代码如下

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 内联框架iFrame

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 #HTML / CSS
字中字效果的实现【html5实例】
May 03 #HTML / CSS
html5需遵循的6个设计原则
Apr 27 #HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 #HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 #HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 #HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 #HTML / CSS
scrapy(1) BottomSheetDialog(1) Quartz(1) DeOldify(1) dataBinding(1) 反射(1) HttpClient(1) RestTemplate(1) 注解(1) ip2region(1)
You might like
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
javascript与CSS复习（《精通javascript》）
2010/06/29 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
Javascript解析URL方法详解
2014/12/05 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
Node.js中你不可不精的Stream（流）
2018/06/08 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
为python设置socket代理的方法
2015/01/14 Python
详解Python3 pickle模块用法
2019/09/16 Python
Python实现中值滤波去噪方式
2019/12/18 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
No7 Beauty美国官网：英国国民护肤品牌
2019/10/31 全球购物
小学音乐教学反思
2014/02/05 职场文书
推荐信格式要求
2014/05/09 职场文书
励志演讲稿300字
2014/08/21 职场文书
追讨欠款律师函
2015/06/24 职场文书
Python3 类型标注支持操作
2021/06/02 Python
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS