首页
所有分类
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 中display box使用方法
Nov 25 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 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) RP-F11(1) 东芝(1) 灵敏度(1) 德劲(5) 手调机(1) 数调机(1) 高放电路(1) 鉴频器(1) TOSHIBA(1)
You might like
用PHP实现多级树型菜单
2006/10/09 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
在Python下尝试多线程编程
2015/04/28 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
Python正则捕获操作示例
2017/08/19 Python
python实现简单登陆流程的方法
2018/04/22 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Python argparse模块应用实例解析
2019/11/15 Python
python3正则模块re的使用方法详解
2020/02/11 Python
什么是Python变量作用域
2020/06/03 Python
新加坡时尚网上购物：Zalora新加坡
2016/07/26 全球购物
俄罗斯茶和咖啡网上商店：Tea.ru
2021/01/26 全球购物
高三自我评价
2014/02/01 职场文书
通知书大全
2015/04/27 职场文书
教师节主题班会教案
2015/08/17 职场文书
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers