iframe：srcdoc 属性

马黑黑

很多朋友都会使用 iframe 发帖。<iframe>标签允许Web页嵌入外部Web页，通过src属性实现。例如：

这将在当前页面嵌入一个第三方Web页，默认尺寸 300*150（px），其中的src属性值只要地址有效就会同步载入地址指向的页面。效果如下：

作为内联框架，iframe标签还有一个和src属性相关的属性，srcdoc，该属性值不是URL地址，而是HTML代码。试看代码和效果：

这意味着什么？我们可以轻而易举地动态改变iframe标签的整体内容！

当然，以src属性嵌入的第三方Web页，如果同源，或支持跨域读写，我们也可以读取和更改其内容，但过程相对繁琐、复杂且有一定难度。而使用srcdoc动态生成iframe的文档内容，我们可以真正同步地对内容进行控制，简单且高效。

来看看一个简单的例子：通过当前页面控制 iframe 的 srcdoc 属性——

点我改变iframe的内容

例中的button按钮就在当前页面，点击它可以控制iframe框架的整体内容。不过，这是在操作整个嵌入的Web内容，想要单独操做iframe里的指定元素，仍需按常规的方式进行，例如获取 iframe 里的 id="mydiv" 元素：

// 假设iframe的id="ifm"
const frmWindow = document.getElementById('ifm').contentWindow;
// 获取id="mydiv"的元素
const mydiv = frmWindow.document.querySelector('#mydiv');

这样，在当前Web页操作iframe里的元素 mydiv就和操作本页面的其它元素一样。

再看另一个例子：动态创建iframe并令其运行本页特定容器中的代码（含JS代码）——

效果：

上述代码只是一个简单的演示，但展现了iframe srcdoc的强大，即支持JS代码的在线运行而无需分离HTML和JS代码然后再进一步加入运行JS的机制，非常方便。

iframe标签有广泛的应用场景，不过用好它也不容易，需要深入学习研究。

杨帆

第一次了解 iframe 的 srcdoc 属性，谢谢马老师精彩讲授