iframe：srcdoc 属性
<style>.artBox { margin: auto; max-width: 1200px; font: normal 18px/1.2 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox h1, .artBox h2 { margin: 4px 0; }
.artBox code, .artBox pre { background: rgba(0,128,128,.25); padding: 2px 6px; tab-size: 4; }
.artBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.artBox pre code { padding: 0; background: none; }
.artBox blockquote { margin: 10px 20px; padding: 2px 15px; border-left: 3px solid skyblue; background: rgba(240,248,255,.65); }
.artBox table { border-collapse: collapse; white-space: pre-wrap; box-sizing: border-box; }
.artBox th, .artBox td { padding: 8px 10px; border: 1px solid #999; }
.artBox th { text-align: center; background: #eee; }
.prevBox, .showBox { text-align: center; }
</style>
<div class="artBox">
<p>很多朋友都会使用 iframe 发帖。<code><iframe></code>标签允许Web页嵌入外部Web页，通过<code>src</code>属性实现。例如：</p>
<pre><code class="codeBox"></code></pre>
<p>这将在当前页面嵌入一个第三方Web页，默认尺寸 300*150（px），其中的src属性值只要地址有效就会同步载入地址指向的页面。效果如下：</p>
<div class="showBox"><iframe src="https://www.runoob.com"></iframe></div>
<p>作为内联框架，iframe标签还有一个和<code>src</code>属性相关的属性，<code>srcdoc</code>，该属性值不是URL地址，而是HTML代码。试看代码和效果：</p>
<pre><code class="codeBox"></code></pre>
<div class="showBox"><iframe srcdoc="<p>Hello Iframe!</p>"></iframe></div>
<p>这意味着什么？我们可以轻而易举地动态改变iframe标签的整体内容！</p>
<p>当然，以src属性嵌入的第三方Web页，如果同源，或支持跨域读写，我们也可以读取和更改其内容，但过程相对繁琐、复杂且有一定难度。而使用srcdoc动态生成iframe的文档内容，我们可以真正同步地对内容进行控制，简单且高效。</p>
<p>来看看一个简单的例子：通过当前页面控制 iframe 的 srcdoc 属性——</p>
<pre><code class="codeBox"></code></pre>
<div class="showBox">
<p><iframe id="ifm" srcdoc="<p>Hello Iframe!</p>"></iframe></p>
<p><button id="btnChange">点我改变iframe的内容</button></p>
<script>
const docRaw = ifm.srcdoc;
btnChange.onclick = () => {
ifm.srcdoc =ifm.srcdoc === docRaw ? '<p>Hello World!</p>' : docRaw;
}
</script>
</div>
<p>例中的button按钮就在当前页面，点击它可以控制iframe框架的整体内容。不过，这是在操作整个嵌入的Web内容，想要单独操做iframe里的指定元素，仍需按常规的方式进行，例如获取 iframe 里的 id="mydiv" 元素：</p>
<pre><code>// 假设iframe的id="ifm"
const frmWindow = document.getElementById('ifm').contentWindow;
// 获取id="mydiv"的元素
const mydiv = frmWindow.document.querySelector('#mydiv');</code></pre>
<p>这样，在当前Web页操作iframe里的元素
<code>mydiv</code>就和操作本页面的其它元素一样。
</p>
<p>再看另一个例子：动态创建iframe并令其运行本页特定容器中的代码（含JS代码）——</p>
<pre><code class="codeBox"></code></pre>
<p>效果：</p>
<div id="sDiv" style="text-align:center;"></div>
<div class="showBox">
<script>
const iframe = document.createElement('iframe');
iframe.srcdoc =`
<style>
img { max-width: 400px; }
</style>
<div>
<img src="https://638183.freep.cn/638183/Pic/81/100s.jpg" alt="">
</div>
`;
iframe.onload = () => {
const w = iframe.contentWindow.document.body.scrollWidth;
const h = iframe.contentWindow.document.body.scrollHeight;
iframe.style.width = `${w + 16}px`;
iframe.style.height = `${h + 16}px`;
};
sDiv.appendChild(iframe); // 将iframe加载到本页面的div
</script>
</div>
<p>上述代码只是一个简单的演示，但展现了iframe srcdoc的强大，即支持JS代码的在线运行而无需分离HTML和JS代码然后再进一步加入运行JS的机制，非常方便。</p>
<p>iframe标签有广泛的应用场景，不过用好它也不容易，需要深入学习研究。</p>
</div>
<script>
const codeBoxes = document.querySelectorAll('.codeBox');
const showBoxes = document.querySelectorAll('.showBox');
const codeElms = document.querySelectorAll('.sCode');
const prevElms = document.querySelectorAll('.prevBox');
showBoxes.forEach((showBox, idx) => {
codeBoxes.innerText = showBox.innerHTML.replaceAll('<', '<').replaceAll('>', '>');
});
prevElms.forEach((elm, idx) => {
elm.innerHTML = codeElms.innerText;
});
</script> 第一次了解 iframe 的 srcdoc 属性，谢谢马老师精彩讲授{:4_176:} 杨帆 发表于 2026-3-13 15:27
第一次了解 iframe 的 srcdoc 属性，谢谢马老师精彩讲授
{:4_191:} 记得iframe被用来发视频的？还不知道它能嵌入外部Web页，更不知道它的 的 srcdoc 属性能轻易改变iframe标签的整体内容，感谢黑黑的讲解，学习了{:4_187:} 红影 发表于 2026-3-13 21:55
记得iframe被用来发视频的？还不知道它能嵌入外部Web页，更不知道它的 的 srcdoc 属性能轻易改变iframe标签 ...
iframe 是用来嵌入外部网页，发视频只是其中的功用之一。
网易云音乐提供的音乐分享，也是用iframe实现
页:
[1]