深入剖析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

HTML / CSS 相关文章推荐
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
css3个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
CSS3 透明色 RGBA使用介绍
Aug 06 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 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
You might like
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
Javascript----文件操作
2007/01/18 Javascript
Dojo 学习要点
2010/09/03 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
javascript原型模式用法实例详解
2015/06/04 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python中时间模块的基本使用教程
2019/05/14 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
医学生个人求职信范文
2013/09/24 职场文书
建筑专业毕业生推荐信
2013/11/21 职场文书
家长会主持词开场白
2014/03/18 职场文书
临床医师个人自我评价
2014/04/06 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
2014年销售员工作总结
2014/12/01 职场文书
微信早安问候语
2015/11/10 职场文书
《将心比心》教学反思
2016/02/23 职场文书
python如何做代码性能分析
2021/04/26 Python
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
redis 存储对象的方法对比分析
2021/08/02 Redis
如何Python使用re模块实现okenizer
2022/04/30 Python