编程 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弹性布局内容对齐（justify-content）属性使用详解

Jul 31 HTML / CSS

CSS3的Border-radius轻松制作圆角

Dec 24 HTML / CSS

CSS3 border-radius圆角的实现方法及用法详解

Sep 14 HTML / CSS

html5 touch事件实现触屏页面上下滑动(二)

Mar 10 HTML / CSS

关于HTML5的安全问题开发人员需要牢记的

Jun 21 HTML / CSS

Bootstrap 学习分享

Nov 12 HTML / CSS

HTML5 history新特性pushState、replaceState及两者的区别

Dec 26 HTML / CSS

HTML5本地数据库基础操作详解

Apr 26 HTML / CSS

html5如何在Canvas中实现自定义路径动画示例

Sep 18 HTML / CSS

移动端html5模拟长按事件的实现方法

Sep 30 HTML / CSS

AmazeUI框架搭建的方法步骤(图文)

Aug 17 HTML / CSS

Ratchet 模态框的实现

Aug 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

PHP新手上路（十一）

2006/10/09 PHP

ThinkPHP实现分页功能

2017/04/28 PHP

PHP使用pdo实现事务处理操作示例

2018/09/05 PHP

用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。

2009/08/15 Javascript

javascript实现可改变滚动方向的无缝滚动实例

2013/06/17 Javascript

JavaScript网页定位详解

2014/01/13 Javascript

javascript获取form里的表单元素的示例代码

2014/02/14 Javascript

基于Node.js的JavaScript项目构建工具gulp的使用教程

2016/05/20 Javascript

jquery层级选择器的实现(匹配后代元素div)

2016/09/05 Javascript

Vue实现virtual-dom的原理简析

2017/07/10 Javascript

十个免费的web前端开发工具详细整理

2017/09/18 Javascript

nodejs实现的连接MySQL数据库功能示例

2018/01/25 NodeJs

JS+HTML5 Canvas实现简单的写字板功能示例

2018/08/30 Javascript

JavaScript解析及序列化JSON的方法实例分析

2019/01/04 Javascript

jQuery实现checkbox全选、反选及删除等操作的方法详解

2019/08/02 jQuery

JS FormData对象使用方法实例详解

2020/02/12 Javascript

js实现页面图片消除效果

2020/03/24 Javascript

新手如何快速入门Python(菜鸟必看篇)

2017/06/10 Python

基于python select.select模块通信的实例讲解

2017/09/21 Python

Python获取当前公网ip并自动断开宽带连接实例代码

2018/01/12 Python

使用apidoc管理RESTful风格Flask项目接口文档方法

2018/02/07 Python

Python实现针对给定单链表删除指定节点的方法

2018/04/12 Python

python使用xlsxwriter实现有向无环图到Excel的转换

2018/12/12 Python

python 在屏幕上逐字显示一行字的实例

2018/12/24 Python

python获取整个网页源码的方法

2020/08/03 Python

python制作一个简单的gui 数据库查询界面

2020/11/19 Python

Python用SSH连接到网络设备

2021/02/18 Python

CSS3媒体查询Media Queries基础学习教程

2016/02/29 HTML / CSS

HTML5 Notification（桌面提醒）功能使用实例

2014/03/17 HTML / CSS

html5给汉字加拼音加进度条的实现代码

2020/04/07 HTML / CSS

质量提升方案

2014/06/16 职场文书

县长“四风”对照检查材料思想汇报

2014/10/05 职场文书

离职报告格式

2014/11/04 职场文书

欠款起诉书范文

2015/05/19 职场文书

CSS3实现列表无限滚动/轮播效果

2021/06/23 HTML / CSS

解决persistence.xml配置文件修改存放路径的问题

2022/02/24 Java/Android