srcdoc polyfill Build Status

HTML5 defines a new attribute for iFrames named srcdoc. This attribute allows developers to specify an iFrame's content in-line with the iFrame itself. For instance:

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

This feature only began to see adoption in major browsers in early 2013. Fortunately, most older browsers support similar functionality through script-targeted URLs, i.e.

<iframe src="javascript: '<html><body>Hello, <b>world</b>.</body></html>'"></iframe>

(Because of limitations on URL length, the actual mechanism that the polyfill implements not quite this direct.)

For more on srcdoc, see the WhatWG specification and this post on


By including the script at the bottom of the document <body>, any available iFrames which declare a srcdoc attribute attribute) will receive this "shimmed" behavior. (In browsers that already implement this functionality, no change will take place.)

Note on the HTML5 sandbox attribute: Because the shim operates using a script-targeted URL in legacy environments, some configurations of the sandbox attribute may interfere with its behavior. This issue will only surface in environments that implement sandbox but that do not implement srcdoc. Because of this, this polyfill's default behavior is to issue a warning for potentially-hazardous configurations but to proceed optimistically. The API supports an force option that enables modification of this behavior.


This script may be consumed as a AMD module, a CommonJS module, or standalone via direct inclusion with a <script> element.


The shim also defines a minimal JavaScript API:

  • srcDoc.set( iframe [, content [, options ] ] ) - sets the content of the provided iFrame element using the srcdoc attribute where available (falling back on a script-targeted URL in non-supporting browsers).
    • content (optional) - The desired content of the iFrame. If blank, the current value of the element's srcdoc attribute will be referenced for content.
    • options (optional) - An object used to specify low-level behavior. Supports a single attribute, force, for controlling behavior in the presence of the sandbox attribute (see the note in "Usage" section of this document).
      • If unspecified, a warning will be issued and the library will attempt to shim the srcdoc behavior optimistically.
      • If true, then the target iFrame's sandbox attribute will be removed prior to setting the content. Note that this
      • If false, no warning will be issued and the library will attempt to shim the srcdoc behavior optimistically.
  • srcDoc.noConflict() - Sets the value of the global srcDoc variable to its original value. Returns the srcDoc object defined by this project for re-aliasing.

Browser Support

Tested in the following browsers:

  • Microsoft Internet Explorer
    • 6, 7, 8, 9, 10, 11
  • Microsoft Edge
    • 13, 14
  • Apple Safari
    • 4, 5.0, 5.1, 6, 6.2, 7.1, 8, 9.1, 10
  • Google Chrome
    • 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24.0.1312.5 (beta), 25.0.1364.5 (dev), 55
  • Opera
    • 11.1, 11.5, 11.6, 12.10, 12.11 (beta), 42
  • Mozilla FireFox
    • 3.0, 3.6, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 (beta), 50

The following browsers are not supported:

  • Opera 10.0


The build process for this project is written with Grunt.js. Please refer to the grunt documentation for details on installing grunt.


The shim's tests are written in QUnit, and can be run by visiting the test/index.html file in the browser, or by running grunt test from the command line.

Release Notes

  • 1.0.0 (2017-01-29)
    • Warn in the presence of the sandbox attribute if its value may cause issues in environments that support it
  • 0.2.0 (2015-10-02)
    • Wrap in "UMD" pattern, enabling more natural consumption from CommonJS and AMD environments
  • 0.1.1 (2013-03-01)
    • Allow content length to exceed the limit browsers impose on URLs
  • 0.1.0 (2012-06-13)
    • Initial release


Copyright (c) 2012 Mike Pennisi
Licensed under the MIT license.

srcdoc polyfill Build Status

HTML5为iFrames定义了一个名为 srcdoc 的新属性。此属性允许 开发人员指定一个iFrame内容与iFrame本身一致。对于 实例:

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

此功能仅在2013年初才开始在主流浏览器中使用。 幸运的是,大多数旧版浏览器支持类似的功能 以脚本为目标的网址,即

<iframe src="javascript: '<html><body>Hello, <b>world</b>.</body></html>'"></iframe>

(由于URL长度的限制,polyfill的实际机制 实现这不直接。)

有关 srcdoc 的更多信息,请参阅 WhatWG规范此信息


通过将脚本包含在文档&lt; body&gt; 的底部,可用 声明一个 srcdoc 属性属性的iFrames将会收到这个 闪烁行为。 (在已经实现此功能的浏览器中,否 将会发生变化。)

关于 HTML5 sandbox 的注意事项 属性 由于垫片在传统环境中使用脚本定位的URL进行操作, sandbox 属性的某些配置可能会干扰其行为。 这个问题只会在实现 sandbox 的环境中表现出来 do 实现 srcdoc 。因此,这个polyfill的默认行为 是发出潜在危险配置的警告,但要继续 乐观地API支持一个允许修改的 force 选项 这种行为。


该脚本可能被用作AMD模块,CommonJS模块或独立模块 通过直接包含&lt; script&gt; 元素


垫片还定义了一个极小的JavaScript API:

  • srcDoc.set(iframe [,content [,options]]) - 设置 提供iFrame元素使用可用的 srcdoc 属性(下降 回到不支持浏览器的脚本目标网址)。
    • content (可选) - iFrame的所需内容。如果空白, 将引用该元素的 srcdoc 属性的当前值 内容。
    • options (可选) - 用于指定低级行为的对象。 支持一个属性, force ,用于控制行为 存在 sandbox 属性(请参阅使用部分中的注释 这个文件)。
      • 如果未指定,将发出警告,图书馆将尝试 乐观地填补 srcdoc 行为。
      • 如果 true ,则目标iFrame的 sandbox 属性将被删除 在设置内容之前。请注意这个
      • 如果 false ,则不会发出警告,图书馆将尝试 乐观地填补 srcdoc 行为。
  • srcDoc.noConflict() - 将全局 srcDoc 变量的值设置为 原始价值。返回此项目定义的 srcDoc 对象 重新生成别名。



  • Microsoft Internet Explorer
    • 6,7,8,9,10,11
  • Microsoft Edge
    • 13,14
  • Apple Safari
  • Google Chrome
      14,15,16,17,18,19,20,21,22,23,24.0.1312.5(beta),25.0.1364.5 (dev),55
  • 歌剧
    • 11.1,11.5,11.6,12.10,12.11(beta),42
  • Mozilla FireFox


  • Opera 10.0


该项目的构建过程是用 Grunt.js 。请参阅grunt文档 有关安装grunt的详细信息。


The shim's tests are written in QUnit, and can be run by visiting the test/index.html file in the browser, or by running grunt test from the command line.


  • 1.0.0 (2017-01-29)
    • 如果 sandbox 属性的值可能导致,则警告 支持环境的问题
  • 0.2.0 (2015-10-02)
    • 以UMD格式包装,使CommonJS和 AMD环境
  • 0.1.1 (2013-03-01)
    • 允许内容长度超出网址上限制的浏览器
  • 0.1.0 (2012-06-13)
    • 初始版本


版权所有(c)2012 Mike Pennisi号 根据麻省理工学院执照许可。