it-swarm.com.de

hTML in einen iframe einfügen (mit Javascript)

Kann ich einen leeren iframe als Platzhalter erstellen, um später HTML darin einzufügen?

Angenommen, ich habe einen leeren Iframe mit einer ID, 

Wie füge ich HTML hinzu?

Ich benutze Jquery, wenn es das einfacher macht.

32
hasen

Sie können es auch ohne jQuery tun:

var iframe = document.getElementById('iframeID');
iframe = iframe.contentWindow || ( iframe.contentDocument.document || iframe.contentDocument);

iframe.document.open();
iframe.document.write('Hello World!');
iframe.document.close();

die HTML-Datei von jQuery entfernt die Tags für body, html und head aus dem eingefügten HTML.

37
Blacksonic

Sehen Sie sich die Quelle dieser Seite an: http://mg.to/test/dynaframe.html Es scheint genau das zu tun, was Sie wollen.

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

Nein, ist es nicht. Sie würden das Skript folgendermaßen ändern:

$(function() {
    var $frame = $('iframe');
    setTimeout( function() {
            var doc = $frame[0].contentWindow.document;
            var $body = $('body',doc);
            $body.html('<h1>Test</h1>');
    }, 1 );
});
8
hotmeteor
iframeElementContainer =   document.getElementById('BOX_IFRAME').contentDocument;
iframeElementContainer.open();
iframeElementContainer.writeln("<html><body>hello</body></html>");
iframeElementContainer.close();

Ja, ich weiß, dass das möglich ist, aber das Hauptproblem ist, dass wir keinen Frame von außen bearbeiten können.

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

aber wenn wir anfangen als 

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

Dann ist es unmöglich, das herauszufinden.

1
Abhilash

Ich habe dasselbe Problem. Wo muss ich HTML-Code-Snippet in iframe dynamisch aus der Datenbank ohne SRC-Attribut von iframe zeigen und dasselbe Problem mit folgendem Code behoben haben

Ich hoffe, das würde jemandem helfen, der dieselbe Anforderung hatte wie ich.

jsfiddle Beispiel hier

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

<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>
0
Sunny S.M