编程 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实现类似翻书效果的过渡动画的示例代码

Sep 06 HTML / CSS

CSS3中的常用选择器使用示例整理

Jun 13 HTML / CSS

CSS3 :not()选择器实现最后一行li去除某种css样式

Oct 19 HTML / CSS

Css3新特性应用之形状总结

Dec 08 HTML / CSS

10分钟理解CSS3 Grid布局

Dec 20 HTML / CSS

html特殊符号示例 html特殊字符编码对照表

Jan 14 HTML / CSS

HTML5中新标签和常用标签详解

Mar 07 HTML / CSS

HTML5新特性之语义化标签

Oct 31 HTML / CSS

HTML5的postMessage的使用手册

Dec 19 HTML / CSS

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

Jun 25 HTML / CSS

ivx平台开发之不用代码实现一个九宫格抽奖功能

Jan 27 HTML / CSS

CSS中calc(100%-100px)不加空格不生效

May 07 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

中国广播史趣谈 — 几个历史第一次

2021/03/01 无线电

PHP.MVC的模板标签系统(一)

2006/09/05 PHP

php Undefined index的问题

2009/06/01 PHP

深入PHP empty(),isset(),is_null()的实例测试详解

2013/06/06 PHP

php实现的百度搜索某地天气的小偷代码

2014/04/23 PHP

PHP防止post重复提交数据的简单例子

2014/06/07 PHP

Thinkphp5.0 框架Model模型简单用法分析

2019/10/11 PHP

PHP中mysqli_get_server_version()的实例用法

2020/02/03 PHP

Javascript 各浏览器的 Javascript 效率对比

2008/01/23 Javascript

js setTimeout 常见问题小结

2013/08/13 Javascript

ExtJS4 表格的嵌套 rowExpander应用

2014/05/02 Javascript

javascript常见操作汇总

2014/09/03 Javascript

微信小程序 SocketIO 实例讲解

2016/10/13 Javascript

php输出全部gb2312编码内的汉字方法

2017/03/04 Javascript

ionic2打包android时gradle无法下载的解决方法

2017/04/05 Javascript

使用Webpack提高Vue.js应用的方式汇总(四种)

2017/07/10 Javascript

Angular中支持SCSS的方法

2017/11/18 Javascript

vue 实现cli3.0中使用proxy进行代理转发

2019/10/30 Javascript

python用10行代码实现对黄色图片的检测功能

2015/08/10 Python

python 简单搭建阻塞式单进程,多进程,多线程服务的实例

2017/11/01 Python

python中yaml配置文件模块的使用详解

2018/04/27 Python

python 创建一个空dataframe 然后添加行数据的实例

2018/06/07 Python

如何利用Pyecharts可视化微信好友

2019/07/04 Python

Flask框架学习笔记之路由和反向路由详解【图文与实例】

2019/08/12 Python

pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异

2021/02/25 Python

浅谈amaze-ui中datepicker和datetimepicker注意的几点

2020/08/21 HTML / CSS

澳大利亚时尚前卫设计师珠宝在线：Amber Sceats

2017/10/04 全球购物

重新定义牛仔布，100美元以下：Warp + Weft

2018/07/25 全球购物

Redbubble法国：由独立艺术家设计的独特产品

2019/01/08 全球购物

光信息科学与技术专业职业生涯规划

2014/03/13 职场文书

令人印象深刻的自荐信

2014/05/25 职场文书

2015年党小组工作总结

2015/05/26 职场文书

高中运动会广播稿

2015/08/19 职场文书

2016年圣诞节寄语（一句话）

2015/12/07 职场文书

喜迎建国70周年：有关爱国的名言名句

2019/09/24 职场文书

Java基础之线程锁相关知识总结

2021/06/30 Java/Android