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

天使之翼 ` 2019-07-01

展开全文

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." 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属性相结合使用，案例可以在我的资源库进行下载