没有 src 但仍有内容的 iframe？
Posted
技术标签:
【中文标题】没有 src 但仍有内容的 iframe？【英文标题】：Iframe without src but still has content? 【发布时间】：2013-08-05 07:53:00 【问题描述】：在他们的网站上调试 jquery 代码时（通过 chrome 开发者工具栏）
我注意到他们的例子是在Iframe 下给出的：
Here - for example 有一个样本在 iframe 下，但经过调查，我发现 iframe 没有 SRC
图片说明了一切
问题：
是否可以在不设置 SRC 的情况下将内容设置为 iframe？
附言这个菜单也显示了一个空的内容
【问题讨论】：
【参考方案1】：是的，可以加载一个空的<iframe>（没有指定src），然后使用脚本对其应用内容。
请参阅：http://api.jquery.com/jquery-wp-content/themes/jquery/js/main.js（第 54 行及以下）。
或者干脆试试：
<iframe></iframe>
<script>
document.querySelector('iframe')
.contentDocument.write("<h1>Injected from parent frame</h1>")
</script>
【讨论】：
$('iframe')[0].contentDocument.write("Injected from parent frame
") 似乎导致浏览器选项卡中的加载图标不断旋转。 使用 document.close() 关闭书写 人们为什么要这样做？用例是什么？您可以将一个 div 甚至自定义 html 元素附加到根主体并使用内联样式和/或长的奇怪的 css 类，这样您就可以确定没有任何东西与现有样式发生冲突，如果这是您想要解决的问题.. @OZZIE codepen.io 使用它来让用户编写在 iframe 中执行的 CSS 和 JS 代码，然后用户可以直接编写 CSS 代码而不内联它。【参考方案2】：是的，这是使用 jQuery 更改 iframe 的 html 的方法
var context = $('iframe')[0].contentWindow.document,
$body = $('body', context);
$body.html('Cool');
演示：http://jsfiddle.net/yBmBa/
document.contentWindow：https://developer.mozilla.org/en-US/d...
【讨论】：
【参考方案3】：看起来这是跨浏览器最兼容的解决方案，并且被W3C识别
<iframe src="about:blank"></iframe>
【讨论】：
【参考方案4】：当然。您可以通过
获得对iframe的document对象的引用
var doc = iframe.contentDocument;
然后您可以像在当前文档中一样创建和添加元素。
如果 iframe 没有 src 属性，它仍将包含一个空文档。我相信至少旧版 IE 需要设置 src 属性，否则 iframe 将没有文档。
另请参阅：contentDocument for an iframe。
【讨论】：
如果设置了src属性，那么是的，只有当加载的文档来自同一个域时才能访问内容。
我想知道他们为什么这样做......将小 html 文件设置为 SRC 比获取它们的内容并注入 iframe 要容易得多......我真的很想知道是否有这个决定背后的原因
也许他们想要单个文件中的方法文档，但每个示例仍然有某种沙箱。但这只是一个假设。你可以问他们；）
@RoyiNamir，他们已经在 Iframe 上方的 DIV 中加载了代码，eval 将用于演示目的的代码行放入 Iframe 比创建单独的静态 html 更容易每一段演示代码。
@RoyiNamir，你是什么意思？【参考方案5】：
尝试给予：
src ="javascript:false;"
【讨论】：
我不这么认为 ,,,i.stack.imgur.com/8zghY.png (jsbin.com/ezekuw/1/edit)【参考方案6】：试试看。
HTML
<div id="iframecontent" style="display: none;">
<b>Hello World!</b> <br /> <i>Hello Again !</i>
</div>
<div style="margin: auto; width: 80%;">
<iframe src="about:blank" name="myiframe"
id="myiframeid"> </iframe>
<br />
<button id="tryIt" onclick="onTryItClick()">Try It</button>
</div>
JavaScript：
<script type="text/javascript">
function onTryItClick()
var content = document.getElementById("iframecontent").innerHTML;
var iframe = document.getElementById("myiframeid");
var frameDoc = iframe.document;
if (iframe.contentWindow)
frameDoc = iframe.contentWindow.document;
frameDoc.open();
frameDoc.writeln(content);
frameDoc.close();
</script>
参考： http://duleekag.blogspot.com/2014/01/html-iframe-without-src-attribute.html
【讨论】：
【参考方案7】：iframe 中的 srcdoc attribute 允许直接设置 HTML 内容：
<iframe srcdoc="<p>Hello world!</p>" src="demo_iframe_srcdoc.htm"></iframe>
src 用于备份，以防浏览器不支持srcdoc。
【讨论】：
【参考方案8】：在 javascript 和 jQuery 中混合使用最佳答案，我为页面中的每个 iframe 提出了这个解决方案：
<div class="iframewrapper ws-s-top mb-50" data-content="<!DOCTYPE html><html><head></head><body><p>Hello world</p></body></html>">
<iframe frameborder="0" src=""></iframe>
</div>
$(".iframewrapper").each(function()
var html = $(this).attr("data-content");
var iframe = $(this).find('iframe');
var context = iframe[0].contentDocument.write(html);
iframe[0].contentWindow.document.close(); //without this line, page loading animations won't go away!
);
【讨论】：
【参考方案9】：您甚至可以使用数据 uri 作为 src：
<!-- a zero width space -->
<iframe src="data:text/plain;charset=utf-8;base64,4oCL"></iframe>
<!-- Hello World! -->
<iframe src="data:text/plain;charset=utf-8;base64,SGVsbG8gV29ybGQh"></iframe>
【讨论】：
以上是关于没有 src 但仍有内容的 iframe？的主要内容，如果未能解决你的问题，请参考以下文章
Web 浏览器何时请求动态创建的 iframe 的 src 内容？