web-dev-qa-db-fra.com

placer du html dans une iframe (avec javascript)

Puis-je créer un iframe vide en tant qu'espace réservé pour y insérer ultérieurement du code HTML?

En d'autres termes, supposons que j'ai un iframe vide avec un identifiant, 

Comment insérer du code HTML dans le fichier?

J'utilise jQuery, si cela facilite les choses.

javascriptjqueryhtmliframe
32
hasen

Vous pouvez le faire sans jQuery également:

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

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

html de jQuery enlève les balises body, html et head du code HTML inséré.

37
Blacksonic

Affichez le source de cette page: http://mg.to/test/dynaframe.html Il semble que vous fassiez exactement ce que vous voulez.

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

Non ce n'est pas. Vous voudriez modifier le script comme ceci:

$(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();
3
Ortal Blumenfeld Lagziel

Oui, je sais que c'est possible mais le problème principal est que nous ne pouvons pas gérer un cadre de l'extérieur. J'ai déjà chargé autre chose.

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

mais si on commence comme 

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

Ensuite, il est impossible de frapper cela.

1
Abhilash

J'ai le même problème, où je dois montrer l'extrait de code HTML dans l'iframe dynamiquement à partir de la base de données sans l'attribut SRC de l'iframe et j'ai résolu le même problème avec le code suivant

J'espère que cela aiderait quelqu'un qui a les mêmes exigences que moi.

exemple jsfiddle ici

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