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

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属性相结合使用，案例可以在我的资源库进行下载
点击打开链接 <https://download.csdn.net/download/sujin_/10383303>

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

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

热门工具换一换