首页
所有分类
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 相关文章推荐
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
HTML5基础学习之文本标签控制
Mar 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
MapReduce(1) pyqt5(3) SpringBoot(22) pycharm(6) Normal From(1) MybatisPlus(2) css3 (2) capture(1) Qlabel(1) JSON(10)
You might like
php ZipArchive压缩函数详解实例
2013/11/06 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
form中限制文本字节数js代码
2007/06/10 Javascript
Add Formatted Text to a Word Document
2007/06/15 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
axios取消请求的实践记录分享
2018/09/26 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
Python 字符串池化的前提
2020/07/03 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
德国、奥地利和瑞士最大的旅行和度假门户网站：HolidayCheck
2019/11/14 全球购物
承认错误的检讨书
2014/01/30 职场文书
小学生暑假感言
2014/02/06 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
飞越疯人院观后感
2015/06/09 职场文书
2019毕业典礼主持词！
2019/07/05 职场文书
Python道路车道线检测的实现
2021/06/27 Python
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android