положить HTML внутри iframe (используя JavaScript) - PullRequest
Новая
       10

положить HTML внутри iframe (используя JavaScript)

32 голосов
/ 07 марта 2009

Могу ли я создать пустой iframe в качестве заполнителя для последующей вставки в него html?

Другими словами, предположим, у меня есть пустой iframe с идентификатором,

Как мне вставить в него HTML?

Я использую jquery, если так будет проще.

Ответы [ 6 ]

37 голосов
/ 23 сентября 2013

Вы также можете сделать это без jQuery: 

var iframe = document.getElementById('iframeID');
iframe = iframe.contentWindow || ( iframe.contentDocument.document || iframe.contentDocument);

iframe.document.open();
iframe.document.write('Hello World!');
iframe.document.close();

HTML-код jQuery удаляет теги body, html и head из вставленного HTML-кода.

36 голосов
/ 07 марта 2009

Просмотреть исходный код этой страницы: http://mg.to/test/dynaframe.html Похоже, он делает именно то, что вы хотите. 

$(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 );
});
8 голосов
/ 15 февраля 2010

Нет, это не так. Вы бы изменили скрипт так: 

$(function() {
    var $frame = $('iframe');
    setTimeout( function() {
            var doc = $frame[0].contentWindow.document;
            var $body = $('body',doc);
            $body.html('<h1>Test</h1>');
    }, 1 );
});
3 голосов
/ 04 августа 2014 
iframeElementContainer =   document.getElementById('BOX_IFRAME').contentDocument;
iframeElementContainer.open();
iframeElementContainer.writeln("<html><body>hello</body></html>");
iframeElementContainer.close();
1 голос
/ 12 сентября 2009

Да, я знаю, что это возможно, но главная проблема в том, что мы не можем обработать кадр снаружи, я уже загрузил кое-что другое. 

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

но если мы начнем как 

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

Тогда это невозможно ударить.

0 голосов
/ 26 июля 2016

У меня та же проблема, где я должен динамически показывать фрагмент кода HTML в iframe из базы данных без атрибута SRC iframe, и я исправил ту же проблему со следующим кодом

Надеюсь, это поможет кому-то, у кого такие же требования, как и у меня.

Пример jsfiddle здесь

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...