编程 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复制内容到剪贴板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
index
<a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>
<br/>
<iframe src="iframe1.html" frameborder="1" width="800px" height="800px"></iframe>
</html>

iframe1.html

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe1</title>
</head>
<body bgcolor="red">
iFrame1
<a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>
<br/>
<iframe src="iframe2.html" frameborder="0" width="600px" height="600px"></iframe>
</body>
</html>

iframe2.html

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe2</title>
</head>
<body bgcolor="green">
iFrame2
<a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>
<br />
<iframe src="iframe3.html" frameborder="0" width="400px" height="400px"></iframe>
</body>
</html>

iframe3.html

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe3</title>
</head>
<body bgcolor="yellow">
iFrame3
<a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a></body>
</html>

貌似各主流网站没有采用这种布局的，应用范围也比较少了。

以上这篇深入剖析HTML5 内联框架iFrame就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

原文地址：http://www.cnblogs.com/czp2016/archive/2016/05/04/5450905.html

深入剖析HTML5 内联框架iFrame

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

css3 实现圆形旋转倒计时

Feb 24 HTML / CSS

使用CSS变量实现炫酷惊人的悬浮效果

Apr 26 HTML / CSS

CSS3 真的会替代 SCSS 吗

Mar 09 HTML / CSS

HTML5本地存储之Web Storage应用介绍

Jan 06 HTML / CSS

HTML5里的placeholder属性使用实例和美化显示效果的方法

Apr 23 HTML / CSS

移动端解决悬浮层（悬浮header、footer）会遮挡住内容的3种方法

Mar 27 HTML / CSS

详解canvas多边形(蜘蛛图)的画法示例

Jan 29 HTML / CSS

快速创建 HTML5 Canvas 电信网络拓扑图的示例代码

Mar 21 HTML / CSS

五分钟学会HTML5的WebSocket协议

Nov 22 HTML / CSS

AmazeUI 折叠面板的实现代码

Aug 17 HTML / CSS

解析CSS 提取图片主题色功能(小技巧)

May 12 HTML / CSS

CSS实现单选折叠菜单功能

Nov 01 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) 图片模糊(1) canvas(2) 外键(1) flex(1) 选择器(1) 克隆(1) SQL注入(2) 代理(2) 增删查改(1)

You might like

模拟xcopy的函数

2006/10/09 PHP

几种显示数据的方法的比较

2006/10/09 PHP

PHP UTF8编码内的繁简转换类

2009/07/20 PHP

PHP计划任务之关闭浏览器后仍然继续执行的函数

2010/07/22 PHP

php xml 入门学习资料

2011/01/01 PHP

基于PHPExcel的常用方法总结

2013/06/13 PHP

jQuery+php简单实现全选删除的方法

2016/11/28 PHP

PHP 实现浏览记录并按日期分组

2017/05/11 PHP

详解php实现页面静态化原理

2017/06/21 PHP

php获取小程序码的实现代码(B类接口)

2020/06/13 PHP

一个加密JavaScript的开源工具PACKER2.0.2

2006/11/04 Javascript

自定义的一个简单时尚js下拉选择框

2013/11/20 Javascript

JavaScript Promise启示录

2014/08/12 Javascript

用户代理字符串userAgent可实现的四个识别

2015/09/20 Javascript

angularJS Provider、factory、service详解及实例代码

2016/09/21 Javascript

js判断浏览器是否支持严格模式的方法

2016/10/04 Javascript

js以及jquery实现手风琴效果

2020/04/17 Javascript

Javascript循环删除数组中元素的几种方法示例

2017/05/18 Javascript

JS一个简单的注册页面实例

2017/09/05 Javascript

对mac下nodejs 更新到最新版本的最新方法(推荐)

2018/05/17 NodeJs

JS数组求和的常用方法实例小结

2019/01/07 Javascript

JavaScript实现好看的跟随彩色气泡效果

2020/02/06 Javascript

Python中join和split用法实例

2015/04/14 Python

目前最全的python的就业方向

2018/06/05 Python

Python 转换文本编码实现解析

2019/08/27 Python

python数据库编程 Mysql实现通讯录

2020/03/27 Python

深入了解Python 变量作用域

2020/07/24 Python

Cult Gaia官网：美国生活方式品牌

2019/08/16 全球购物

天网面试题

2013/04/07 面试题

英语自我评价范文

2014/01/24 职场文书

小学教师听课制度

2014/02/01 职场文书

实习单位证明范例

2014/11/17 职场文书

2015年世界环境日活动方案

2015/05/05 职场文书

Java中API的使用方法详情

2022/04/06 Java/Android

Oracle中日期的使用方法实例

2022/07/07 Oracle

python读取mat文件生成h5文件的实现

2022/07/15 Python