编程 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 相关文章推荐

HTML5如何适配 iPhone IOS 底部黑条

Mar 09 HTML / CSS

css3实现波纹特效、H5实现动态波浪效果

Jan 31 HTML / CSS

CSS3提交意见输入框样式代码

Oct 30 HTML / CSS

HTML5 Canvas之测试浏览器是否支持Canvas的方法

Jan 01 HTML / CSS

使用html5 canvas 画时钟代码实例分享

Nov 11 HTML / CSS

HTML块级标签汇总（小篇）

Jul 13 HTML / CSS

canvas绘制圆角头像的实现方法

Jan 17 HTML / CSS

通过canvas转换颜色为RGBA格式及性能问题的解决

Nov 22 HTML / CSS

总结html5自定义属性有哪些

Apr 01 HTML / CSS

html2canvas生成的图片偏移不完整的解决方法

May 19 HTML / CSS

HTML5逐步分析实现拖放功能的方法

Sep 30 HTML / CSS

css常用字体属性与背景属性介绍

Feb 28 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的fsockopen、pfsockopen函数被主机商禁用的解决办法

2014/07/08 PHP

Laravel5.1框架路由分组用法实例分析

2020/01/04 PHP

JS添加删除一组文本框并对输入信息加以验证判断其正确性

2013/04/11 Javascript

js的回调函数详解

2015/01/05 Javascript

jquery+html仿翻页相册功能

2016/12/20 Javascript

Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法

2016/12/30 Javascript

JavaScript EventEmitter 背后的秘密完整版

2018/03/29 Javascript

详解Vue2.0配置mint-ui踩过的那些坑

2018/04/23 Javascript

详解vue+axios给开发环境和生产环境配置不同的接口地址

2019/08/16 Javascript

JavaScript设计模式--简单工厂模式定义与应用案例详解

2020/05/23 Javascript

解决Vue-cli无法编译es6的问题

2020/10/30 Javascript

JS实现炫酷轮播图

2020/11/15 Javascript

ESLint 是如何检查 .vue 文件的

2020/11/30 Vue.js

Python中用于转换字母为小写的lower()方法使用简介

2015/05/19 Python

Python的time模块中的常用方法整理

2015/06/18 Python

Python中for循环和while循环的基本使用方法

2015/08/21 Python

Python实现并行抓取整站40万条房价数据（可更换抓取城市）

2016/12/14 Python

Python基于回溯法子集树模板解决m着色问题示例

2017/09/07 Python

详解TensorFlow在windows上安装与简单示例

2018/03/05 Python

利用python将pdf输出为txt的实例讲解

2018/04/23 Python

Python3.5运算符操作实例详解

2019/04/25 Python

Python OpenCV 调用摄像头并截图保存功能的实现代码

2019/07/02 Python

torch 中各种图像格式转换的实现方法

2019/12/26 Python

印度尼西亚电子产品购物网站：Kliknklik

2018/06/05 全球购物

50道外企软件测试面试题

2014/08/18 面试题

公司新员工的演讲稿注意事项

2014/01/01 职场文书

银行类自荐信

2014/02/04 职场文书

2014新课程改革心得体会

2014/03/10 职场文书

汽车质检员岗位职责

2015/04/08 职场文书

放假通知范文

2015/04/14 职场文书

初中班长竞选稿

2015/11/20 职场文书

党风廉政教育心得体会2016

2016/01/22 职场文书

如何写一份成功的商业计划书

2019/06/25 职场文书

Python基础详解之邮件处理

2021/04/28 Python

详解Mysql数据库平滑扩容解决高并发和大数据量问题

2022/05/25 MySQL

如何基于python实现单目三维重建详解

2022/06/25 Python