43

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

我注意到他们的例子如下Iframe：

这里 - 例如有一个样本在 Iframe 下，但经过调查，我发现 Iframe 没有SRC

图片说明了一切

在此处输入图像描述

问题 ：

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

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

在此处输入图像描述

4

9 回答 9

49

是的，可以加载一个空的<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>
于 2013-08-04T14:42:37.127 回答
8

是的，这是使用 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...

于 2013-08-04T14:52:27.917 回答
6

看起来这是跨浏览器最兼容的解决方案，也被W3C认可

<iframe src="about:blank"></iframe>
于 2015-08-04T22:29:23.227 回答
3

当然。您可以通过以下方式获得对iframe'sdocument对象的引用

var doc = iframe.contentDocument;

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

如果 iframe 没有src属性，它仍然会包含一个空文档。我相信尽管至少较旧的 IE 版本需要设置src属性，否则 iframe 将没有文档。

另请参阅：iframe 的 contentDocument。

于 2013-08-04T14:49:56.817 回答
1

尝试给予：

src ="javascript:false;"
于 2013-08-04T14:38:11.877 回答
1

有允许直接设置 HTML 内容的srcdoc属性：iframe

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

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

于 2021-07-01T12:19:25.177 回答
1

试试看。

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

于 2019-09-13T13:05:20.657 回答
0

您甚至可以使用数据 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>
于 2021-11-01T14:37:44.523 回答
0

将 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!
});
于 2018-05-08T05:33:11.577 回答