Вставить HTML в iframe

Я создаю редактор HTML в браузере. Я использую подсветку синтаксиса под названием Code Mirror, которая очень хороша.

Моя настройка - это iframe, который содержит вид редактируемой страницы и текстовую область, на которой сидит текстовый HTML, который пользователь редактирует.

Я пытаюсь вставить отредактированный HTML из текстового поля в iframe, который отображает их визуализацию HTML.

Возможно ли это? Я пробовал следующее:

Настройка HTML:

<iframe id="render">

</iframe>

<textarea id="code">
HTML WILL BE 

HERE
</textarea>
<input type="submit" id="edit_button" value="Edit" />

Настройка JQuery:

$('#edit_button').click(function(){
    var code = editor.getCode(); // editor.getCode() is a codemirror function which gets the HTML from the text area
    var iframe = $('#render');
    iframe.html(code)
})

Это не похоже на загрузку HTML в iframe, есть ли специальный способ вставки HTML в iframe или это невозможно?

Приветствия

Eef

Ответ 1

Установите свойство document.designMode и попробуйте добавить HTML.

Смотрите также: Редактирование Rich-Text в Mozilla

Ответ 2

Эта проблема также сильно исказила меня и, наконец, нашла решение.

Поздно, но добавит ценность другим посетителям, которые могут нуждаться в правильном исправлении.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>Iframe test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(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 );
        });
    </script>
</head>
<body>
</body>
</html>

Ответ 3

Вы можете сделать все это на одной строке с помощью jquery

$("iframe").contents().find('html').html("Your new HTML");

См. здесь рабочую демонстрацию http://jsfiddle.net/dWpvf/972/

Замените "iframe" на "#render" для вашего примера. Я ушел в "iframe", чтобы другие пользователи могли ссылаться на ответ.

Ответ 4

попробуйте

iframe[0].documentElement.innerHTML = code;

Предполагая, что url для iframe находится из того же домена, что и веб-страница.