编程 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模拟jq点击事件的实例代码

Jul 06 HTML / CSS

css3 box-sizing属性使用参考指南

Jan 08 HTML / CSS

带有css3动画效果的兼容多浏览器简单导航条示例

Jan 26 HTML / CSS

使用CSS3编写灰阶滤镜来制作黑白照片效果的方法

May 09 HTML / CSS

CSS3实现多样的边框效果

May 04 HTML / CSS

Html5无刷新修改browser Url的方法

Jan 15 HTML / CSS

html5使用canvas画空心圆与实心圆

Dec 15 HTML / CSS

html5生成柱状图(条形图)效果的实例代码

Mar 25 HTML / CSS

HTML5本地存储之IndexedDB

Jun 16 HTML / CSS

解决html5中的video标签ios系统中无法播放使用的问题

Aug 10 HTML / CSS

DIV CSS实现网页背景半透明效果

Dec 06 HTML / CSS

CSS 实现角标效果的完整代码

Jun 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

《DOTA3》开发工作已经开始《DOTA3》将代替《DOTA2》

2021/03/06 DOTA

PHP 字符串操作入门教程

2006/12/06 PHP

php获取后台Job管理的实现代码

2011/06/10 PHP

windows下zendframework项目环境搭建(通过命令行配置)

2012/12/06 PHP

PHP处理CSV表格文件的常用操作方法总结

2016/07/01 PHP

浅谈php中curl、fsockopen的应用

2016/12/10 PHP

ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解

2017/07/20 PHP

jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍

2011/11/21 Javascript

javascript两种function的定义介绍及区别说明

2013/05/02 Javascript

JavaScript中输出标签的方法

2014/08/27 Javascript

嵌入式iframe子页面与父页面js通信的方法

2015/01/20 Javascript

jQuery实现获取隐藏div高度的方法示例

2017/02/09 Javascript

backbone简介_动力节点Java学院整理

2017/07/14 Javascript

解读ES6中class关键字

2017/11/20 Javascript

jQuery中复合选择器简单用法示例

2018/03/31 jQuery

vue中使用heatmapjs的示例代码（结合百度地图）

2018/09/05 Javascript

浅谈从React渲染流程分析Diff算法

2018/09/08 Javascript

jQuery动态操作表单示例【基于table表格】

2018/12/06 jQuery

微信小程序使用echarts获取数据并生成折线图

2019/10/16 Javascript

Python+OpenCV让电脑帮你玩微信跳一跳

2018/01/04 Python

Python进阶之尾递归的用法实例

2018/01/31 Python

基于python list对象中嵌套元组使用sort时的排序方法

2018/04/18 Python

python3使用SMTP发送HTML格式邮件

2018/06/19 Python

Python使用matplotlib绘制Logistic曲线操作示例

2019/11/28 Python

什么是smarty? Smarty的优点是什么？

2013/08/11 面试题

在Ajax应用中信息是如何在浏览器和服务器之间传递的

2016/05/31 面试题

Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗

2013/05/01 面试题

造价工程师个人求职信

2013/09/21 职场文书

公司培训欢迎词

2014/01/10 职场文书

企业办公室主任岗位职责

2014/02/19 职场文书

小学向国旗敬礼活动方案

2014/09/27 职场文书

先进个人总结范文

2015/02/15 职场文书

一般纳税人申请报告

2015/05/18 职场文书

2016年优秀党务工作者先进事迹材料

2016/02/29 职场文书

Tensorflow与RNN、双向LSTM等的踩坑记录及解决

2021/05/31 Python

MySQL Shell import_table数据导入的实现

2021/08/07 MySQL