将html放入iframe（使用javascript）_Javascript_Jquery_Html_Iframe

将html放入iframe（使用javascript）

javascript jquery html iframe

将html放入iframe（使用javascript）,javascript,jquery,html,iframe,Javascript,Jquery,Html,Iframe,我可以创建一个空的iframe作为占位符，以便以后将html插入其中吗换句话说，假设我有一个id为的空iframe 如何在其中插入html 我正在使用jquery，如果这能让它更简单的话。查看此页面的源代码：它似乎正是您想要做的 $(function() { var $frame = $('<iframe style="width:200px; height:100px;">'); $('body').html( $frame ); setTimeout(

我可以创建一个空的iframe作为占位符，以便以后将html插入其中吗

换句话说，假设我有一个id为的空iframe

如何在其中插入html

我正在使用jquery，如果这能让它更简单的话。

查看此页面的源代码：它似乎正是您想要做的

$(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 );
});

$（函数（）{
变量$frame=$（''）；
$（'body'）.html（$frame）；
setTimeout（函数（）{
var doc=$frame[0]。contentWindow.document；
变量$body=$（'body'，doc）；
$body.html（'Test'）；
}, 1 );
});

是的，我知道这是可能的，但主要问题是我们无法从外部处理帧，我已经加载了其他东西

$(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 );
});

$（函数（）{
变量$frame=$（''）；
$（'body'）.html（$frame）；
setTimeout（函数（）{
var doc=$frame[0]。contentWindow.document；
变量$body=$（'body'，doc）；
$body.html（'Test'）；
}, 1 );
});

但如果我们从

<iframe src="http:/www.hamrobrt.com">
<---Your Script to put as you like--->

那就不可能打出来了。

不，不是。您可以按如下方式修改脚本：

$(function() {
    var $frame = $('iframe');
    setTimeout( function() {
            var doc = $frame[0].contentWindow.document;
            var $body = $('body',doc);
            $body.html('<h1>Test</h1>');
    }, 1 );
});

$（函数（）{
变量$frame=$（'iframe'）；
setTimeout（函数（）{
var doc=$frame[0]。contentWindow.document；
变量$body=$（'body'，doc）；
$body.html（'Test'）；
}, 1 );
});

您也可以在不使用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的html从插入的html中剥离主体、html和头部标记。

iframelementcontainer=document.getElementById（'BOX\IFRAME'）.contentDocument；
iframeElementContainer =   document.getElementById('BOX_IFRAME').contentDocument;
iframeElementContainer.open();
iframeElementContainer.writeln("<html><body>hello</body></html>");
iframeElementContainer.close();

iframelementcontainer.open（）；
iframelementcontainer.writeln（“你好”）；
iframelementcontainer.close（）；

我也有同样的问题，我必须从数据库中动态显示iframe中的html代码片段，而不使用iframe的SRC属性，并且我修复了以下代码中的相同问题

我希望这将有助于谁有相同的要求，我有人

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>


var文件，$body；
var txt=数组(
'正文{背景色：灰色}h1{背景色：红色；字体重量：900}酷！！！这是第一个Iframe的文本'，
'正文{背景色：粉红色}h1{背景色：绿色；字体重量：200}酷这是第二个Iframe的文本'，
'正文{背景色：黄色}h1{字体重量：400}酷…..这是第三个Iframe'的文本，
'正文{背景色：蓝色}h1{字体重量：400}酷这是第四个iframe的文本'
);
$（'.iframe'）。每个（函数（索引、值）{
doc=$（'iframe'）[index].contentWindow.document；
$body=$（'body'，doc）；
$body.html（txt[index]）；
});

这是正确答案<代码>。请注意，iframe必须插入到其父文档中。从AJAX请求加载“document.write”脚本时，iframe=iframe.contentWindow | | |（iframe.contentDocument.document | iframe.contentDocument）这不是正确的方法。这没有功能。当您可能需要

head

元素，甚至

html

元素的属性时，这只复制

body

元素。为什么要设置超时？

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