HTML <iframe> 标签的 sandbox 属性 详解
HTML基础 2022-06-02 12:01:36小码哥的IT人生shichen
HTML <iframe> 标签的 sandbox 属性
实例
带有额外限制的 <iframe>：
<iframe src="demo_iframe_sandbox.htm" sandbox=""></iframe>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<iframe src="/demo/demo_iframe_sandbox.html" sandbox="">
<p>Your browser does not support iframes.</p>
</iframe>
<p>"获得日期和时间" 按钮会在行内框架中运行一段脚本。</p>
<p>由于 sandbox 属性被设置为空字符串 ("")，行内框架的内容不允许运行脚本。</p>
<p>如果向 sandbox 属性添加 "allow-scripts"，则允许运行 JavaScript。</p>
<p><b>注释：</b>IE 9 以及更早的版本不支持 sandbox 属性，Opera 12 以及更早的版本也不支持该属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
（页面底部有更多实例。）
浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
所有主流浏览器都支持 sandbox 属性。
注释：IE 9 以及更早的版本不支持 sandbox 属性，Opera 12 以及更早的版本也不支持该属性。
定义和用法
如果被规定为空字符串（sandbox=""），sandbox 属性将会启用一系列对行内框架中内容的额外限制。
sandbox 属性的值既可以是一个空字符串（应用所有的限制），也可以是空格分隔的预定义值列表（将移除特定的限制）。
HTML 4.01 与 HTML 5 之间的差异
sandbox 是 HTML5 中的新属性。
语法
<iframe sandbox="value">
属性值
| 值 | 描述 |
|---|---|
| "" | 应用以下所有的限制。 |
| allow-same-origin | 允许 iframe 内容被视为与包含文档有相同的来源。 |
| allow-top-navigation | 允许 iframe 内容从包含文档导航（加载）内容。 |
| allow-forms | 允许表单提交。 |
| allow-scripts | 允许脚本执行。 |
亲自试一试 - 实例
完整实例【允许表单提交的 <iframe> sandbox】：
<!DOCTYPE html>
<html>
<body>
<iframe src="/demo/demo_iframe_sandbox_form.html" sandbox="">
<p>Your browser does not support iframes.</p>
</iframe>
<p>"提交" 按钮将提交行内框架内的表单。</p>
<p>由于 sandbox 属性被设置为空字符串 ("")，将屏蔽对行内框架中表单的提交。</p>
<p>如果向 sandbox 属性添加 "allow-forms"，则允许表单提交。</p>
<p><b>注释：</b>IE 9 以及更早的版本不支持 sandbox 属性，Opera 12 以及更早的版本也不支持该属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
启用一系列额外的限制，但允许表单提交。
完整实例【允许脚本并访问服务器内容的 <iframe> sandbox】：
<!DOCTYPE html>
<html>
<body>
<iframe src="/demo/demo_iframe_sandbox_origin.html" sandbox="allow-same-origin allow-scripts">
<p>Your browser does not support iframes.</p>
</iframe>
<p>请试着删除 sandbox 属性，或者改变其设置。</p>
<p><b>注释：</b>IE 9 以及更早的版本不支持 sandbox 属性，Opera 12 以及更早的版本也不支持该属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
启用一系列额外限制，但允许脚本并访问服务器内容。
