it-swarm.com.de

Fügen Sie Inhalte in iFrame ein

Ich versuche, Inhalte in einen 'leeren' iFrame einzufügen, es wird jedoch nichts eingefügt.

HTML:

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

JS:

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

Ich rufe die Funktion ready auf, damit ich nicht verstehe, warum sie nicht eingefügt wird.

39
user2521439

Sie brauchen dafür wirklich kein jQuery:

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

jsFiddle Demo

Wenn Sie unbedingt jQuery verwenden müssen, sollten Sie contents() verwenden:

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

jsFiddle Demo

Bitte vergessen Sie nicht, dass Sie sich bei Verwendung von jQuery wie folgt in die DOMReady-Funktion einbinden müssen:

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

Dies sollte tun, was Sie wollen:

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

Überprüfen Sie diese JSFiddle für die Arbeit Demo.

Bearbeiten: Du kannst es natürlich mit einem Linienstil machen:

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

Wenn Sie alle CSS Elemente auf Ihrer Webseite in Ihrem IFrame haben möchten, versuchen Sie Folgendes:

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

Viel Glück.

2
Akash

Sie können beispielsweise Text aus div in iFrame eingeben:

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

und divs:

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

und JSFiddle Demo: Link