jQuery 没有 src 但仍有内容的 iframe？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18044073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Iframe without src but still has content?
提问by Royi Namir
While debugging jquery code on their site ( via chrome developer toolbar)
在他们的网站上调试 jquery 代码时（通过 chrome 开发者工具栏）
I noticed that their examples are given under Iframe:
我注意到他们的例子在下面给出Iframe：
Here - for examplethere is a sample which is under an Iframe but after investigating , I see that the Iframe doesn't have SRC
这里 - 例如有一个样本在 Iframe 下，但经过调查，我发现 Iframe 没有SRC
The picture shows it all
图片说明了一切
Question :
题 ：
Is it possible to set content to an Iframe without setting its SRC ?
是否可以在不设置其 SRC 的情况下将内容设置为 Iframe？
p.s. this menu also shows me an empty content
ps 这个菜单也给我显示了一个空的内容
回答by haim770
Yes, it is possible to load an empty <iframe>(with no srcspecified) and later apply content to it using script.
是的，可以加载一个空的<iframe>（没有src指定），然后使用脚本将内容应用到它。
See: http://api.jquery.com/jquery-wp-content/themes/jquery/js/main.js(line 54 and below).
请参阅：http: //api.jquery.com/jquery-wp-content/themes/jquery/js/main.js（第 54 行及以下）。
Or simply try:
或者干脆试试：
<iframe></iframe>
document.querySelector('iframe')
.contentDocument.write("<h1>Injected from parent frame</h1>")
回答by iConnor
Yes, Here is how you change the html of the iframe with jQuery
是的，这是使用 jQuery 更改 iframe 的 html 的方法
var context = $('iframe')[0].contentWindow.document,
$body = $('body', context);
$body.html('Cool');
Demo: http://jsfiddle.net/yBmBa/
演示：http: //jsfiddle.net/yBmBa/
document.contentWindow: https://developer.mozilla.org/en-US/d...
document.contentWindow：https://developer.mozilla.org/en-US/d...
回答by Oriol
回答by Felix Kling
Sure. You can get a reference to the iframe's documentobject with
当然。您可以获得对iframe'sdocument对象的引用
var doc = iframe.contentDocument;
and then you can create and add elements like you do in the current document.
然后您可以像在当前文档中一样创建和添加元素。
If the iframe doesn't have a srcattribute, it will still contain an empty document. I believe though that at least older IE versions require the srcattribute to be set, otherwise the iframe won't have a document.
如果 iframe 没有src属性，它仍将包含一个空文档。我相信至少旧的 IE 版本需要设置src属性，否则 iframe 将没有文档。
See also: contentDocument for an iframe.
另请参阅：iframe 的 contentDocument。
回答by Aditya
Try giving :
尝试给予：
src ="javascript:false;"
回答by Alex Jolig
Mixing best answers in javascript and jQuery, I come up with this solution for each iframein a page:
将 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!
});
回答by Ishwar Lal
Try it.
尝试一下。
HTML
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:
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>
Reference: http://duleekag.blogspot.com/2014/01/html-iframe-without-src-attribute.html
参考：http: //duleekag.blogspot.com/2014/01/html-iframe-without-src-attribute.html
