编程 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实现冲击波效果的示例代码

Jan 11 HTML / CSS

HTML5 对各个标签的定义与规定：body的介绍

Jun 21 HTML / CSS

在HTML5 Canvas中放入图片和保存为图片的方法

May 03 HTML / CSS

详解HTML5中download属性的应用

Aug 06 HTML / CSS

HTML5标签使用方法详解

Nov 27 HTML / CSS

HTML5实现动画效果的方式汇总

Feb 29 HTML / CSS

通过HTML5 Canvas API绘制弧线和圆形的教程

Mar 14 HTML / CSS

基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)

Jul 24 HTML / CSS

将SVG图引入到HTML页面的实现

Sep 20 HTML / CSS

html5 制作地图当前定位箭头的方法示例

Jan 10 HTML / CSS

Html5在手机端调用相机的方法实现

May 13 HTML / CSS

使用HTML5做的导航条详细步骤

Oct 19 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

php5 mysql分页实例代码

2008/04/10 PHP

PHP UTF8编码内的繁简转换类

2009/07/20 PHP

MySql数据库查询结果用表格输出PHP代码示例

2015/03/20 PHP

简介WordPress中用于获取首页和站点链接的PHP函数

2015/12/17 PHP

php简单实现批量上传图片的方法

2016/05/09 PHP

表单内同名元素的控制

2006/11/22 Javascript

容易造成JavaScript内存泄露几个方面

2014/09/04 Javascript

jQuery实现根据类型自动显示和隐藏表单

2015/03/18 Javascript

基于jQuery通过jQuery.form.js插件实现异步上传

2015/12/13 Javascript

JQuery中Ajax()的data参数类型实例分析

2015/12/15 Javascript

js移动焦点到最后位置的简单方法

2016/11/25 Javascript

Angular.JS实现无限级的联动菜单(使用demo)

2017/02/08 Javascript

网页中右键功能的实现方法之contextMenu的使用

2017/02/20 Javascript

jquery插件ContextMenu设置右键菜单

2017/03/13 Javascript

angular directive的简单使用总结

2017/05/24 Javascript

vue实现抽屉弹窗效果

2020/11/15 Javascript

python中的字典使用分享

2016/07/31 Python

Python使用django框架实现多人在线匿名聊天的小程序

2017/11/29 Python

windows下Virtualenvwrapper安装教程

2017/12/13 Python

Python类的继承和多态代码详解

2017/12/27 Python

Python pandas.DataFrame 找出有空值的行

2019/09/09 Python

安装Pycharm2019以及配置anconda教程的方法步骤

2019/11/11 Python

python根据文本生成词云图代码实例

2019/11/15 Python

Python time库基本使用方法分析

2019/12/13 Python

使用CSS3来匹配横屏竖屏的简单方法

2015/08/04 HTML / CSS

关于css兼容性问题及一些常见问题汇总

2016/05/03 HTML / CSS

html2canvas生成清晰的图片实现打印的示例代码

2019/09/30 HTML / CSS

Larsson & Jennings官网：现代瑞士钟表匠

2018/03/20 全球购物

Java中各种基本数据类型的默认值都是什么

2016/12/22 面试题

4s店机修工岗位职责

2013/12/20 职场文书

自主招生自荐信指南

2014/02/04 职场文书

2014乡镇班子个人对照检查材料思想汇报

2014/09/26 职场文书

导游词之太行山青龙峡

2020/01/14 职场文书

详解CSS不定宽溢出文本适配滚动

2021/05/24 HTML / CSS

Python中22个万用公式的小结

2021/07/21 Python

css布局巧妙技巧之css三角示例的运用

2022/03/16 HTML / CSS