没有 src 但仍有内容的 iframe？答案

【问题标题】：Iframe without src but still has content?没有 src 但仍有内容的 iframe？
【发布时间】：2013-08-05 07:53:00
【问题描述】：

在他们的网站上调试 jquery 代码时（通过 chrome 开发者工具栏）

我注意到他们的例子是在Iframe 下给出的：

Here - for example 有一个样本在 iframe 下，但经过调查，我发现 iframe 没有 SRC

图片说明了一切

问题：

是否可以在不设置 SRC 的情况下将内容设置为 iframe？

附言这个菜单也显示了一个空的内容

【问题讨论】：

标签： javascript jquery html dom 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 height="100" width="100%" 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>

【讨论】：