编程 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中transition属性详解

Sep 02 HTML / CSS

CSS3+js实现简单的时钟特效

Mar 18 HTML / CSS

使用HTML和CSS3绘制基本卡通图案的示例分享

Nov 06 HTML / CSS

HTML5 用动画的表现形式装载图像

Mar 08 HTML / CSS

Html5内唤醒百度、高德APP的实现示例

May 20 HTML / CSS

HTML5安全介绍之内容安全策略（CSP）简介

Jul 10 HTML / CSS

HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦

Apr 25 HTML / CSS

HTML5实现锚点时请使用id取代name

Sep 06 HTML / CSS

关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法

Jan 27 HTML / CSS

HTML5中的音频和视频媒体播放元素小结

Jan 29 HTML / CSS

HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果

Apr 26 HTML / CSS

CSS巧用渐变实现高级感背景光动画

Dec 06 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通用检测函数集合

2011/02/08 PHP

php学习笔记之面向对象编程

2012/12/29 PHP

PHP7+Nginx的配置与安装教程详解

2016/05/10 PHP

postman的安装与使用方法(模拟Get和Post请求)

2018/08/06 PHP

php-fpm中max_children的配置

2019/03/15 PHP

JS效率个人经验谈（8-15更新），加入range技巧

2007/01/09 Javascript

JavaScript 继承的实现

2009/07/09 Javascript

dwz 如何去掉ajaxloading具体代码

2013/05/22 Javascript

鼠标经过显示二级菜单js特效

2013/08/13 Javascript

HTML页面登录时的JS验证方法

2014/05/28 Javascript

JavaScript中函数声明与函数表达式的区别详解

2016/08/18 Javascript

canvas实现动态小球重叠效果

2017/02/06 Javascript

jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】

2017/03/24 jQuery

easyui combogrid实现本地模糊搜索过滤多列

2017/05/13 Javascript

vue中父子组件注意事项,传值及slot应用技巧

2018/05/09 Javascript

React Native中Mobx的使用方法详解

2018/12/04 Javascript

webpack4.x下babel的安装、配置及使用详解

2019/03/07 Javascript

vue--vuex详解

2019/04/15 Javascript

微信小程序商品详情页底部弹出框

2019/11/22 Javascript

JavaScript复制变量三种方法实例详解

2020/01/09 Javascript

[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY

2014/06/25 DOTA

[01:03:36]Ti4 循环赛第三日DK vs Titan

2014/07/12 DOTA

Python如何读取MySQL数据库表数据

2017/03/11 Python

Python时间的精准正则匹配方法分析

2017/08/17 Python

Python贪心算法实例小结

2018/04/22 Python

Python后台管理员管理前台会员信息的讲解

2019/01/28 Python

简单了解django orm中介模型

2019/07/30 Python

django 多数据库及分库实现方式

2020/04/01 Python

Python基于当前时间批量创建文件

2020/05/07 Python

Python Switch Case三种实现方法代码实例

2020/06/18 Python

简单的命令查看安装的python版本号

2020/08/28 Python

基于 Python 实践感知器分类算法

2021/01/07 Python

使用CSS3 制作一个material-design 风格登录界面实例

2016/12/12 HTML / CSS

大学毕业后的十年规划

2014/01/07 职场文书

小学生班干部竞选稿

2015/11/20 职场文书

校园安全教育心得体会

2016/01/15 职场文书