placer du html dans une iframe (en utilisant javascript)

StackOverflow https://stackoverflow.com/questions/620881

Question

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 ce fichier?

J'utilise jquery, si cela facilite les choses.

Était-ce utile?

La solution

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

Le code HTML de jQuery supprime les balises body, html et head du code HTML inséré.

Autres conseils

Afficher la source de cette page: http://mg.to/test/dynaframe.html Il semble faire exactement ce que vous voulez faire. 

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

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

iframeElementContainer =   document.getElementById('BOX_IFRAME').contentDocument;
iframeElementContainer.open();
iframeElementContainer.writeln("<html><body>hello</body></html>");
iframeElementContainer.close();

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 nous commençons comme 

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

Ensuite, il est impossible de frapper cela.

  

J'ai le même problème, où je dois afficher l'extrait de code HTML dans l'iframe de manière dynamique à partir de la base de données sans l'attribut SRC d'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 de 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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top