web-dev-qa-db-fra.com

Insérer du contenu dans iFrame

J'essaie d'insérer du contenu dans un iFrame "vide", mais rien n'est inséré.

HTML:

<iframe id="iframe"></iframe>

JS:

$("#iframe").ready(function() {
    var $doc = $("#iframe").contentWindow.document;
    var $body = $("<body>").text("Test");
    $body.insertAfter($doc);
});

J'appelle la fonction ready alors je ne comprends pas pourquoi elle ne l'insère pas.

javascriptjqueryhtmliframe
39
user2521439

Vous n'avez vraiment pas besoin de jQuery pour cela:

var doc = document.getElementById('iframe').contentWindow.document;
doc.open();
doc.write('Test');
doc.close();

jsFiddle Demo

Si vous devez absolument utiliser jQuery, vous devez utiliser contents() :

var $iframe = $('#iframe');
$iframe.ready(function() {
    $iframe.contents().find("body").append('Test');
});

jsFiddle Demo

N'oubliez pas que si vous utilisez jQuery, vous devez vous connecter à la fonction DOMReady comme suit:

$(function() {  
    var $iframe = $('#iframe');
    $iframe.ready(function() {
        $iframe.contents().find("body").append('Test');
    });
});
92
BenM

Cela devrait faire ce que vous voulez:

$("#iframe").ready(function() {
    var body = $("#iframe").contents().find("body");
    body.append('Test');
});

Vérifiez ceci JSFiddle pour travailler avec la démo.

Edit: Vous pouvez bien sûr faire un style de ligne:

$("#iframe").contents().find("body").append('Test');
4
Pavel Štěrba

Si vous voulez que tous les CSS se trouvent sur votre page Web dans votre IFrame, essayez ceci:

var headClone, iFrameHead;

// Create a clone of the web-page head
headClone = $('head').clone();

// Find the head of the the iFrame we are looking for
iFrameHead = $('#iframe').contents().find('head');

// Replace 'iFrameHead with your Web page 'head'
iFrameHead.replaceWith(headClone);

// You should now have all the Web page CSS in the Iframe

Bonne chance.

2
Akash

Vous pouvez saisir (par exemple) le texte de div dans iFrame:

var $iframe = $('#iframe');
$iframe.ready(function() {
    $iframe.contents().find("body").append($('#mytext'));
});

et divs:

<iframe id="iframe"></iframe>
<div id="mytext">Hello!</div>

et démo JSFiddle: lien

2
Marinha do Nascimento