HTML不再推薦頁(yè)面中使用框架集，因此HTML5刪除了<frameset>、<frame>和<noframes>這三個(gè)元素。不過(guò)HTML5還保留了<iframe>元素，該元素可以在普通的HTML頁(yè)面中使用，生成一個(gè)行內(nèi)框架，可以直接放在HTML頁(yè)面的任意位置。除了指定id、class和style之外，還可以指定如下屬性：
src指定一個(gè)URL，指定該iframe將裝載哪個(gè)頁(yè)面
name設(shè)置iframe的名字
longdesc也是指定URL，包含了iframe的長(zhǎng)描述
scrolling設(shè)置iframe中顯示滾動(dòng)條：yes、no、auto（大小不夠時(shí)顯示）
height設(shè)置iframe的高度
width設(shè)置該iframe的寬度
frameborder設(shè)置是否顯示該iframe的邊框
marginheight設(shè)置該iframe的頂部和底部的頁(yè)邊距
marginwidth設(shè)置iframe的左側(cè)和右側(cè)的頁(yè)邊距
下面代碼中，定義了一個(gè)行內(nèi)框架
<!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> 行內(nèi)框架 </title>
</head>
<body>
<iframe src="img1.html" width="200" height="120"></iframe>
主頁(yè)面內(nèi)容
</body>
</html>
1.HTML5新增的srcdoc屬性
HTML5新增的srcdoc屬性允許直接指定HTML片段，這樣<iframe>元素將直接顯示該srcdoc所指定的HTML片段，如果瀏覽器暫時(shí)不支持srcdoc，那么將會(huì)繼續(xù)顯示srcdoc所指定的頁(yè)面內(nèi)容。目前主流的瀏覽器都支持：比如說(shuō)谷歌、火狐等等。例如，如下代碼定義了同時(shí)指定srcdoc和src屬性的<iframe>元素，此時(shí)srcdoc屬性將會(huì)覆蓋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> 行內(nèi)框架 </title>
</head>
<body>
<iframe src="img1.html" width="300" height="120"
srcdoc="<h3>HTML 5</h3><div>HTML 5是重要的標(biāo)記語(yǔ)言</div>"></iframe>
主頁(yè)面內(nèi)容
</body>
</html>
上面的粗體字代表了srcdoc屬性，此時(shí)<iframe>所生成的行內(nèi)框架將直接顯示該屬性所指定的HTML片段，忽略src屬性所指定的頁(yè)面。顯示的效果如下：
2.HTML5新增的seamless屬性
seamless屬性是一個(gè)支持boolean值的屬性，指定了該屬性的<iframe>所生成的框架看上去是原文檔的一部分，不再顯示邊框和進(jìn)度條。不過(guò)到目前為止，好像沒(méi)有什么瀏覽器完全支持這個(gè)屬性。
3.HTML5新增的sandbox屬性
sandbox是一個(gè)安全性方面的屬性，用于對(duì)框架中的增加一系列額外限制。該屬性支持如下屬性值：
屬性 限制全部
allow-forms 允許框架內(nèi)的表單進(jìn)行提交
allow-same-origin 允許將框架內(nèi)所加載的頁(yè)面視為與使用該<iframe>元素的頁(yè)面來(lái)自相同源（即使這兩個(gè)頁(yè)面來(lái)自不同源）
allow-scripts
允許框架內(nèi)加載JavaScript
allow-top-navigation 允許將框架內(nèi)所加載頁(yè)面中的超鏈接導(dǎo)航到父級(jí)窗口
對(duì)于不指定sandbox屬性的<iframe>元素所加載的HTML界面幾乎不受任何限制，如果指定了sandbox為"",這就意味著限制了如下功能：
禁止頁(yè)面內(nèi)使用插件
禁止頁(yè)面內(nèi)的表單提交
頁(yè)面的超鏈接只能加載到<iframe>框架內(nèi)
<iframe>框架內(nèi)所加載的網(wǎng)頁(yè)被視為來(lái)自不同源，不同源的意思是對(duì)于兩個(gè)頁(yè)面對(duì)應(yīng)的URL的域名不同或端口不同，就會(huì)禁止Ajax進(jìn)行交互，禁止加載服務(wù)器，禁止頁(yè)面從cookie讀取內(nèi)容。
3.1 allow-forms屬性值
指定這個(gè)屬性，可以允許<iframe>框架內(nèi)的界面提交表單，通常和allow-same-origin屬性結(jié)合使用。例如，指定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> 表單頁(yè)面 </title>
</head>
<body>
<form action="addUser.action">
用戶(hù)名：<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> 行內(nèi)框架 </title>
</head>
<body>
<iframe src="form.html" width="300" height="120"
sandbox="allow-forms"></iframe>
主頁(yè)面內(nèi)容
</body>
</html>
除了在IE可以提交之外，其他瀏覽器都不能提交，如果將sandbox="allow-forms"改為sandbox="allow-forms allow-same-origin"，表單什么的就都可以提交了。瀏覽器要求必須是同源的才可以，因此才需要添加allow-same-origin屬性值。
3.2 allow-scripts屬性值
允許框架中使用JavaScript腳本，寫(xiě)了兩個(gè)頁(yè)面，如下所示：
<!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> 腳本頁(yè)面 </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> 行內(nèi)框架 </title>
</head>
<body>
<iframe src="scripts.html" width="300" height="120"
sandbox="allow-scripts"></iframe>
主頁(yè)面內(nèi)容
</body>
</html>
運(yùn)行之后，超鏈接的內(nèi)容發(fā)生了變化，此時(shí)頁(yè)面的JavaScript腳本確實(shí)執(zhí)行了，但第二條卻沒(méi)有執(zhí)行，這是因?yàn)槌鲇诎踩紤]，禁止了這個(gè)屬性執(zhí)行JavaScript執(zhí)行對(duì)話(huà)框，當(dāng)然IE除外，現(xiàn)在360也支持了，谷歌允許效果如下圖所示。
3.3 allow-top-navigation屬性值
允許<iframe>框架內(nèi)頁(yè)面中超鏈接在該行內(nèi)框架的父級(jí)瀏覽器中打開(kāi)，可以自己親自試一試，第一個(gè)是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> 表單頁(yè)面 </title>
</head>
<body>
<a href="http://www.crazyit.org" alt="瘋狂Java聯(lián)盟" target="_top">瘋狂Java聯(lián)盟</a>
</body>
</html>
target="_top">瘋狂Java聯(lián)盟</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> 行內(nèi)框架 </title>
</head>
<body>
<iframe src="nav.html" width="300" height="120"
sandbox="allow-top-navigation"></iframe>
主頁(yè)面內(nèi)容
</body>
</html>
target="_top"設(shè)置超鏈接需要直接在瀏覽器中打開(kāi)，由于設(shè)置了sandbox="allow-top-navigation"屬性，所以點(diǎn)擊超鏈接會(huì)直接跳轉(zhuǎn)到瀏覽器中。
3.4 allow-same-origin屬性值
兩個(gè)網(wǎng)頁(yè)所在URL的域名相同、端口相同才能被當(dāng)初同一源。出于安全考慮，如果兩個(gè)網(wǎng)頁(yè)不是同一源，那么網(wǎng)頁(yè)是不允許使用Ajax進(jìn)行交互的，一旦設(shè)置了allow-same-origin屬性，就會(huì)被視為同源，加載服務(wù)器的內(nèi)容，這些操作都需要JavaScript，因此常常需要與allow-scripts屬性相結(jié)合使用，案例可以在我的資源庫(kù)進(jìn)行下載
