编程 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的rem属性制作响应式页面布局的要点解析

May 24 HTML / CSS

css3个性化字体_动力节点Java学院整理

Jul 12 HTML / CSS

css3闪亮进度条效果实现思路及代码

Apr 17 HTML / CSS

CSS3 透明色 RGBA使用介绍

Aug 06 HTML / CSS

用CSS3实现无限循环的无缝滚动的实例代码

Jul 04 HTML / CSS

CSS3 真的会替代 SCSS 吗

Mar 09 HTML / CSS

详解rem 适配布局

Oct 31 HTML / CSS

只要五步就可以用HTML5/CSS3快速制作便签贴特效(图)

Jun 04 HTML / CSS

html5 worker 实例(二) 图片变换效果

Jun 24 HTML / CSS

Html5移动端适配IphoneX等机型的方法

Jun 25 HTML / CSS

html5移动端禁止长按图片保存的实现

Apr 20 HTML / CSS

关于HTML编码导致的乱码问题

Sep 04 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

php如何控制用户对图片的访问 PHP禁止图片盗链

2016/03/25 PHP

PHP实现的浏览器检查类

2016/04/11 PHP

php实现和c#一致的DES加密解密实例

2017/07/24 PHP

PHP树形结构tree类用法示例

2019/02/01 PHP

Javascript----文件操作

2007/01/18 Javascript

Dojo 学习要点

2010/09/03 Javascript

鼠标移动到图片名上,显示图片的简单实例

2013/07/14 Javascript

NodeJS学习笔记之Http模块

2015/01/13 NodeJs

javascript原型模式用法实例详解

2015/06/04 Javascript

javascript 动态修改css样式方法汇总(四种方法)

2015/08/27 Javascript

EasyUI折叠表格层次显示detailview详解及实例

2016/12/28 Javascript

在Js页面通过POST传递参数跳转到新页面详解

2017/08/25 Javascript

基于vue2实现上拉加载功能

2017/11/28 Javascript

Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解

2018/03/13 Javascript

Vue父子组建的简单通信之控制开关Switch的实现

2018/06/04 Javascript

Angular使用Restful的增删改

2018/12/28 Javascript

判断js数据类型的函数实例详解

2019/05/23 Javascript

[02:57]2014DOTA2国际邀请赛-观众采访

2014/07/19 DOTA

利用Python如何制作好玩的GIF动图详解

2018/07/11 Python

python中时间模块的基本使用教程

2019/05/14 Python

Python对Excel按列值筛选并拆分表格到多个文件的代码

2019/11/05 Python

Python+Redis实现布隆过滤器

2019/12/08 Python

python模拟预测一下新型冠状病毒肺炎的数据

2020/02/01 Python

PyQt5如何将.ui文件转换为.py文件的实例代码

2020/05/26 Python

医学生个人求职信范文

2013/09/24 职场文书

建筑专业毕业生推荐信

2013/11/21 职场文书

家长会主持词开场白

2014/03/18 职场文书

临床医师个人自我评价

2014/04/06 职场文书

建设单位项目负责人任命书

2014/06/06 职场文书

2014年销售员工作总结

2014/12/01 职场文书

微信早安问候语

2015/11/10 职场文书

《将心比心》教学反思

2016/02/23 职场文书

python如何做代码性能分析

2021/04/26 Python

新手必备之MySQL msi版本下载安装图文详细教程

2021/05/21 MySQL

redis 存储对象的方法对比分析

2021/08/02 Redis

如何Python使用re模块实现okenizer

2022/04/30 Python