深入剖析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模拟jq点击事件的实例代码
Jul 06 HTML / CSS
css3 box-sizing属性使用参考指南
Jan 08 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
PHP 字符串操作入门教程
2006/12/06 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
解读ES6中class关键字
2017/11/20 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
造价工程师个人求职信
2013/09/21 职场文书
公司培训欢迎词
2014/01/10 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
先进个人总结范文
2015/02/15 职场文书
一般纳税人申请报告
2015/05/18 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL