首页
所有分类
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 相关文章推荐
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
HTML5 对各个标签的定义与规定：body的介绍
Jun 21 HTML / CSS
不可轻视HTML5！App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
html5简介及新增功能介绍
May 18 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
日志格式分析(1)  AD域(1) Windows server 2012(17) destoon(1) 组策略(1) nginx(76) TableField(1) create(1) 子查询(1) mounted(1)
You might like
PHP学习笔记之一
2011/01/17 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
jquery操作select大全
2014/04/25 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
Vue计算属性的使用
2017/08/04 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
详解javascript中的babel到底是什么
2018/06/21 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python自动登录126邮箱的方法
2015/07/10 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
python中数组和矩阵乘法及使用总结（推荐）
2019/05/18 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
链表面试题-一个链表的结点结构
2015/05/04 面试题
优秀员工个人的自我评价
2013/11/29 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
银行授权委托书样本
2014/10/13 职场文书
数学教师个人工作总结
2015/02/06 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
2022年显卡天梯图（6月更新）
2022/06/17 数码科技