将 html 放入 iframe 中（使用 javascript）
[英]putting html inside an iframe (using javascript)
问题描述
Can I create an empty iframe as a placeholder to later insert html into it?
我可以创建一个空的 iframe 作为占位符，以便稍后将 html 插入其中吗？
In otherwords, suppose I have an empty iframe with an id,换句话说，假设我有一个带有 id 的空 iframe，
How do I insert html in it?如何在其中插入 html？
I'm using jquery, if that makes it easier.我正在使用 jquery，如果这样更容易的话。
6 个解决方案
解决方案1
49 已采纳 2013-09-23 10:36:53
You can do it without jQuery also:您也可以在没有 jQuery 的情况下执行此操作：
var iframe = document.getElementById('iframeID');
iframe = iframe.contentWindow || ( iframe.contentDocument.document || iframe.contentDocument);
iframe.document.open();
iframe.document.write('Hello World!');
iframe.document.close();
jQuery's html strips body, html and head tags from the inserted HTML. jQuery 的 html 从插入的 HTML 中去除主体、html 和头部标签。
解决方案2
37 2009-03-06 23:46:55
View the source of this page: http://mg.to/test/dynaframe.html It appears to do exactly what you want to do.查看此页面的来源： http://mg.to/test/dynaframe.html它似乎完全符合您的要求。
$(function() {
var $frame = $('<iframe style="width:200px; height:100px;">');
$('body').html( $frame );
setTimeout( function() {
var doc = $frame[0].contentWindow.document;
var $body = $('body',doc);
$body.html('<h1>Test</h1>');
}, 1 );
});
解决方案3
9 2010-02-15 17:08:11
No it's not.不，这不对。 You would modify the script like this:您可以像这样修改脚本：
$(function() {
var $frame = $('iframe');
setTimeout( function() {
var doc = $frame[0].contentWindow.document;
var $body = $('body',doc);
$body.html('<h1>Test</h1>');
}, 1 );
});
解决方案4
5 2014-08-04 10:59:01
iframeElementContainer = document.getElementById('BOX_IFRAME').contentDocument;
iframeElementContainer.open();
iframeElementContainer.writeln("<html><body>hello</body></html>");
iframeElementContainer.close();
解决方案5
1
Yes I know that is possible but the main problem is that we cannot handle a frame from outside it i has already loaded some other thing.是的，我知道这是可能的，但主要问题是我们无法从外部处理框架，我已经加载了其他东西。
$(function() {
var $frame = $('<iframe style="width:200px; height:100px;">');
$('body').html( $frame );
setTimeout( function() {
var doc = $frame[0].contentWindow.document;
var $body = $('body',doc);
$body.html('<h1>Test</h1>');
}, 1 );
});
but if we start as但如果我们开始
<iframe src="http:/www.hamrobrt.com">
<---Your Script to put as you like--->
Then its impossible to hit that out.那么就不可能做到这一点。
解决方案6
0 2016-07-26 08:13:41
I have same problem, Where I have to show html code snippet in iframe dynamically from database without SRC attribute of iframe and I fixed same problem with following code
I hope this would help someone who has same requirement I had.
jsfiddle example here jsfiddle 示例在这里
HTML: HTML：
<iframe src="" frameborder="0" class="iframe"></iframe>
<iframe src="" frameborder="0" class="iframe"></iframe>
<iframe src="" frameborder="0" class="iframe"></iframe>
<iframe src="" frameborder="0" class="iframe"></iframe>
JS JS
<script>
var doc,$body;
var txt = Array(
'<style>body{background-color:grey} h1{background-color:red;font-weight:900}</style><h1>Cool!!! this is text for</h1><p>First Iframe</p>',
'<style>body{background-color:pink}h1{background-color:green;font-weight:200}</style><h1>Cool This is Text for</h1><p> second Iframe',
'<style>body{background-color:yellow}h1{font-weight:400}</style><h1>Cool..... This is text FOR : </h1> <div>3rd Iframe</div>',
'<style>body{background-color:blue} h1{font-weight:400}</style><h1>Cool This is text for Fourth iframe</h1>'
);
$('.iframe').each(function(index,value){
doc = $('iframe')[index].contentWindow.document;
$body = $('body',doc);
$body.html(txt[index]);
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.