HTML不再推荐页面中使用框架集，因此HTML5删除了<frameset>、<frame>和<noframes>这三个元素。不过HTML5还保留了<iframe>元素，该元素可以在普通的HTML页面中使用，生成一个行内框架，可以直接放在HTML页面的任意位置。除了指定id、class和style之外，还可以指定如下属性：

src	指定一个URL，指定该iframe将装载哪个页面
name	设置iframe的名字
longdesc	也是指定URL，包含了iframe的长描述
scrolling	设置iframe中显示滚动条：yes、no、auto（大小不够时显示）
height	设置iframe的高度
width	设置该iframe的宽度
frameborder	设置是否显示该iframe的边框
marginheight	设置该iframe的顶部和底部的页边距
marginwidth	设置iframe的左侧和右侧的页边距

下面代码中，定义了一个行内框架

<!DOCTYPE html>
<html>
<head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 行内框架 </title>
</head>
<body>
<iframe src="img1.html" width="200" height="120"></iframe>
主页面内容
</body>
</html>

1.HTML5新增的srcdoc属性

HTML5新增的srcdoc属性允许直接指定HTML片段，这样<iframe>元素将直接显示该srcdoc所指定的HTML片段，如果浏览器暂时不支持srcdoc，那么将会继续显示srcdoc所指定的页面内容。目前主流的浏览器都支持：比如说谷歌、火狐等等。例如，如下代码定义了同时指定srcdoc和src属性的<iframe>元素，此时srcdoc属性将会覆盖src属性。

<!DOCTYPE html>
<html>
<head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 行内框架 </title>
</head>
<body>
<iframe src="img1.html" width="300" height="120"srcdoc="<h3>HTML 5</h3><div>HTML 5是重要的标记语言</div>"></iframe>
主页面内容
</body>
</html>

上面的粗体字代表了srcdoc属性，此时<iframe>所生成的行内框架将直接显示该属性所指定的HTML片段，忽略src属性所指定的页面。显示的效果如下：

2.HTML5新增的seamless属性

seamless属性是一个支持boolean值的属性，指定了该属性的<iframe>所生成的框架看上去是原文档的一部分，不再显示边框和进度条。不过到目前为止，好像没有什么浏览器完全支持这个属性。

3.HTML5新增的sandbox属性

sandbox是一个安全性方面的属性，用于对框架中的增加一系列额外限制。该属性支持如下属性值：

属性	限制全部
allow-forms	允许框架内的表单进行提交
allow-same-origin	允许将框架内所加载的页面视为与使用该<iframe>元素的页面来自相同源（即使这两个页面来自不同源）
allow-scripts	允许框架内加载JavaScript
allow-top-navigation	允许将框架内所加载页面中的超链接导航到父级窗口

对于不指定sandbox属性的<iframe>元素所加载的HTML界面几乎不受任何限制，如果指定了sandbox为"",这就意味着限制了如下功能：

禁止页面内使用插件
禁止页面内的表单提交
页面的超链接只能加载到<iframe>框架内
<iframe>框架内所加载的网页被视为来自不同源，不同源的意思是对于两个页面对应的URL的域名不同或端口不同，就会禁止Ajax进行交互，禁止加载服务器，禁止页面从cookie读取内容。

3.1 allow-forms属性值

指定这个属性，可以允许<iframe>框架内的界面提交表单，通常和allow-same-origin属性结合使用。例如，指定allow-forms属性值

<!DOCTYPE html>
<html>
<head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 表单页面 </title>
</head>
<body>
<form action="addUser.action">用户名：<input type="text" name="name"/><br>密码：<input type="password" name="pass"/><br><input type="submit" value="提交"/>
</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 行内框架 </title>
</head>
<body>
<iframe src="form.html" width="300" height="120"sandbox="allow-forms"></iframe>
主页面内容
</body>
</html>

除了在IE可以提交之外，其他浏览器都不能提交，如果将sandbox="allow-forms"改为sandbox="allow-forms allow-same-origin"，表单什么的就都可以提交了。浏览器要求必须是同源的才可以，因此才需要添加allow-same-origin属性值。

3.2 allow-scripts属性值

允许框架中使用JavaScript脚本，写了两个页面，如下所示：

<!DOCTYPE html>
<html>
<head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 脚本页面 </title>
</head>
<body>
<a href="" onclick="this.innerHTML=this.innerHTML + '有趣'; alert('确定');">
单击我</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 行内框架 </title>
</head>
<body>
<iframe src="scripts.html" width="300" height="120"sandbox="allow-scripts"></iframe>
主页面内容
</body>
</html>

运行之后，超链接的内容发生了变化，此时页面的JavaScript脚本确实执行了，但第二条却没有执行，这是因为出于安全考虑，禁止了这个属性执行JavaScript执行对话框，当然IE除外，现在360也支持了，谷歌允许效果如下图所示。

3.3 allow-top-navigation属性值

允许<iframe>框架内页面中超链接在该行内框架的父级浏览器中打开，可以自己亲自试一试，第一个是nav.html。

<!DOCTYPE html>
<html>
<head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 表单页面 </title>
</head>
<body>
<a href="http://www.crazyit.org" alt="疯狂Java联盟" target="_top">疯狂Java联盟</a>
</body>
</html>
target="_top">疯狂Java联盟</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 行内框架 </title>
</head>
<body>
<iframe src="nav.html" width="300" height="120" sandbox="allow-top-navigation"></iframe>
主页面内容
</body>
</html>

target="_top"设置超链接需要直接在浏览器中打开，由于设置了sandbox="allow-top-navigation"属性，所以点击超链接会直接跳转到浏览器中。

3.4 allow-same-origin属性值

两个网页所在URL的域名相同、端口相同才能被当初同一源。出于安全考虑，如果两个网页不是同一源，那么网页是不允许使用Ajax进行交互的，一旦设置了allow-same-origin属性，就会被视为同源，加载服务器的内容，这些操作都需要JavaScript，因此常常需要与allow-scripts属性相结合使用，案例可以在我的资源库进行下载点击打开链接

如果有什么看不懂的地方或者哪里有问题，请在下方留言。

--------------如果大家喜欢我的博客，可以点击左上角的关注哦。

三分钟带你看完HTML5增强的【iframe元素】相关推荐

三分钟带你看懂prototype原型——ES6进阶
三分钟带你看懂prototype原型--ES6进阶 1. prototype 定义 2. new 构造函数 3. 存储 4. prototype 作用 1. prototype 定义在JS中的类的实 ...
三分钟带你看懂HDMI接口的PCB设计
三分钟带你看懂HDMI接口的PCB设计本文主要讲解的是HDMI的设计,包括作用和运用的总结,希望大家看了以后能轻松的应对各种HDMI方案的PCB设计. 一.什么是HDMI? 高清晰度多媒体接口(英文 ...
【WWDC】10分钟带你看完苹果WWDC2022、iOS16、iPadOS16、macOS Ventura、watchOS 9
WWDC 2022 四大系统 **iOS16** **iPadOS16** **macOS** **watchOS 9** **两大硬件** 重磅推出全新M2芯片和两款搭载M2芯片的硬件: **Mac ...
5分钟带你看完 WWDC 2018
前言一年一度的 WWDC(苹果全球开发者大会)于北京时间 6月5日凌晨1点开幕.废话不多说,来看看这次WWDC 都有哪些亮点吧! iOS 12 和 ARKit 2.0 关键词:官方防沉迷最为致命 ...
开关柜太复杂看着头疼？三分钟带你看懂开关柜！
安科瑞华楠开关柜是指按一定的方案将一次设备.二次设备组装而成的成套配电装置,主要用来对线路.设备实施控制.保护.开关柜按进出线电压等级可分高压开关柜(固定式和手车式)和低压开关柜(固定式和抽屉式) ...
有python专业的世界大学_爬虫可视化 | 三分钟带你看遍世界大学排行
↑关注 + 星标 ,后台回复[ 大礼包 ]送你Python自学大礼包代码大学,一直都是神圣的学习知识的殿堂,各个世界级名校都不断地为社会输送着人才,今天我们就来盘一盘世界大学的排名情况. 数据获取 ...
干货：五分钟带你看懂NestedScrolling嵌套滑动机制
Android NestedScrolling嵌套滑动机制 Android在发布5.0之后加入了嵌套滑动机制NestedScrolling,为嵌套滑动提供了更方便的处理方案.在此对嵌套滑动机制进行详细 ...
三分钟带你弄懂slot插槽——vue进阶
文章目录三分钟带你弄懂slot插槽--vue进阶一.概述程序员之死什么是 slot插槽? 2.6.0 版本中的 slot 二.具名插槽例子效果图代码三.小惊喜三分钟带你弄懂slot插 ...
mysql和oracle冲突吗_三分钟带你分清MySQL 和Oracle之间的误区
原标题:三分钟带你分清MySQL 和Oracle之间的误区来自:华为云开发者社区摘要:MySQL和Oracle,别再傻傻分不清. MySQL 和Oracle 在开发中的使用是随处可见的,那就简单去 ...

三分钟带你看完HTML5增强的【iframe元素】