iframe标签的sandbox属性

简介: iframe标签的sandbox属性

定义

如果被规定为空字符串(sandbox=“”),sandbox 属性将会启用一系列对行内框架中内容的额外限制。

sandbox 属性的值既可以是一个空字符串(应用所有的限制),也可以是空格分隔的预定义值列表(将移除特定的限制)。

用法

  1. sandbox=“”
      应用所有限制
  2. sandbox=“allow-same-origin”
      允许 iframe 内容被视为与包含文档有相同的来源。
  3. sandbox=“allow-top-navigation”
      允许 iframe 内容从包含文档导航(加载)内容。
      可用于禁用外部网站的JS跳转、target=“_parent”、target="_top"等
  4. sandbox=“allow-forms”
      允许表单提交。
  5. sandbox=“allow-scripts”
      允许脚本执行,即允许iframe运行脚本(但不创建弹出窗口)。
      可用于禁用外部网站的JS
  6. sandbox=“allow-popups”
      允许弹出窗口(如window.open,target=“_blank”)。
  7. sandbox=“allow-scripts”
      允许弹出窗口逃离沙箱:允许一个沙箱文件打开新窗口不强制使用沙盒。

实例

例如:此iframe只允许加载script,其他的全部限制。

<iframe width="930" height="630" sandbox="allow-scripts" src="http://www.baidu.com"></iframe>

遇到的问题:

iframe使用sandbox属性后,即使将所有值设为允许,页面中的flash也无法使用

参考:

HTML <iframe> 标签的 sandbox 属性


相关文章
|
3天前
|
前端开发
CSS列表属性
CSS列表属性。
18 5
|
3天前
|
SEO
iframe标签是做什么用的
iframe标签是做什么用的
14 0
|
6月前
|
JavaScript 前端开发
vue2.0 + element-ui +iframe在页面 中嵌入外部网站
vue2.0 + element-ui +iframe在页面 中嵌入外部网站
145 0
|
6月前
|
存储 JavaScript 前端开发
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
58 1
|
8月前
|
JavaScript 前端开发
js内联外联样式的获取,父页面获取iframe框架元素返回null
js内联外联样式的获取,父页面获取iframe框架元素返回null
|
9月前
|
前端开发
react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
118 0
|
9月前
|
安全 UED
HTML <iframe> 标签的常用属性--详解(附加代码)
HTML <iframe> 标签的常用属性--详解(附加代码)
105 0
|
前端开发 JavaScript
使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
199 0
使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
|
Web App开发 前端开发 JavaScript
<link>标签实现预加载功能
这就触到了本人的知识盲区了,本着扫盲的目的,研究了下 link 标签,发现这个小东西功能还是挺强大的,上面的就是为了实现预加载功能,懂点儿英文的,一看见preload 就大致知道了。
1658 0