Вставить содержимое в iFrame

Я пытаюсь вставить некоторый контент в "чистый" iFrame, но ничего не вставлено.

HTML:

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

JS:

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

Я вызываю функцию ready, поэтому я не понимаю, почему она не вставляет.

Ответы

Ответ 1

Вам действительно не нужен jQuery для этого:

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

jsFiddle Demo

Если вам абсолютно необходимо использовать jQuery, вы должны использовать contents():

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

jsFiddle Demo

Не забывайте, что если вы используете jQuery, вам нужно подключиться к функции DOMReady следующим образом:

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

Ответ 2

Это должно делать то, что вы хотите:

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

Отметьте JSFiddle для рабочей демонстрации.

Изменить: Конечно, вы можете сделать это в одном стиле:

$("#iframe").contents().find("body").append('Test');

Ответ 3

Вы можете ввести (например) текст из div в iFrame:

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

и divs:

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

и JSFiddle demo: ссылка

Ответ 4

Если вы хотите, чтобы все CSS на вашей веб-странице в вашем IFrame, попробуйте следующее:

var
    // 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

Удачи.