Question

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

我注意到他们的示例是在Iframe：

下提供的

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

图片全部显示

enter image description here

问题：

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

P.S。这个菜单还显示了一个空内容

enter image description here

Answer 1

是的，可以加载空的<iframe>（未指定src），然后使用脚本将内容应用于它。

请参阅：http://api.jquery.com/jquery-wp-content/themes/jquery/js/main.js（第54行及以下）。

或者只是尝试：

<iframe></iframe>

document.querySelector('iframe')
        .contentDocument.write("<h1>Injected from parent frame</h1>")

Answer 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...

Answer 3

看起来这是跨浏览器的最兼容的解决方案，并且W3C

也能识别它

<iframe src="about:blank"></iframe>

Answer 4

不确定。您可以使用

获取对iframe的{{1}}对象的引用

document

然后您可以像在当前文档中一样创建和添加元素。

如果iframe没有var doc = iframe.contentDocument;属性，它仍会包含空文档。我相信，至少旧的IE版本需要设置src属性，否则iframe将没有文档。

另请参阅：contentDocument for an iframe。

Answer 5

尝试给予：

src ="javascript:false;"

Answer 6

在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!
});

Answer 7

尝试一下。

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

Answer 8

iframe 中的 srcdoc attribute 允许直接设置 HTML 内容：

<iframe srcdoc="<p>Hello world!</p>" src="demo_iframe_srcdoc.htm"></iframe>

src 用于备份，以防浏览器不支持 srcdoc。

iframe没有src但仍有内容？

8 个答案: