Вставьте контент в 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 функция, поэтому я не понимаю, почему он не вставляет.

Источник

4 ответа

Решение

Вам действительно не нужен 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');
    });
});
Источник

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

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

Проверьте это JSFiddle для работы демо.

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

$("#iframe").contents().find("body").append('Test');
Источник

Подождите, вам действительно нужно отрендерить его с помощью javascript?

Имейте в виду, что в HTML5 есть srcdoc, который может сделать это за вас! (Недостаток в том, что IE/EDGE еще не поддерживает его https://caniuse.com/)

Посмотреть здесь [srcdoc]: https://www.w3schools.com/tags/att_iframe_srcdoc.asp

Следует также отметить, что если вы хотите избежать вмешательства кода js внутри и снаружи, вам следует подумать об использованииsandbox Режим.

Посмотреть здесь [sandbox]: https://www.w3schools.com/tags/att_iframe_sandbox.asp

Источник

Вы можете ввести (например) текст из 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: ссылка

Источник

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

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

Удачи.

Источник
Другие вопросы по тегам