Fügen Sie HTML in iframe ein

Question 1

Ich erstelle einen HTML-Editor im Browser. Ich verwende den Syntax-Highlighter namens Code Mirror, der sehr gut ist.

Mein Setup ist ein Iframe, der eine Ansicht der Seite enthält, die bearbeitet wird, und einen Textbereich, in dem sich der Klartext-HTML befindet, den der Benutzer bearbeitet.

Ich versuche, den bearbeiteten HTML-Code aus dem Textbereich in den Iframe einzufügen, der den gerenderten HTML-Code anzeigt.

Ist das möglich? Ich habe folgendes versucht:

HTML-Setup:

<iframe id="render">

</iframe>

<textarea id="code">
HTML WILL BE 

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

JQuery-Setup:

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

Dies scheint das HTML nicht in den Iframe zu laden, gibt es eine spezielle Methode, um HTML in einen Iframe einzufügen, oder ist dies nicht möglich?

Question 2

Dieses Problem hat mich auch genervt und endlich eine Lösung gefunden.

Es ist spät, wird aber einen Mehrwert für andere Besucher schaffen, die möglicherweise eine angemessene Lösung benötigen.

    <!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>

Question 3

Mit jquery können Sie alles in einer Zeile erledigen

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

Siehe funktionierende Demo hier http://jsfiddle.net/dWpvf/972/

Ersetzen Sie für Ihr Beispiel „iframe“ durch „#render“. Ich habe in “iframe” gelassen, damit andere Benutzer auf die Antwort verweisen können.

Question 4

Versuchen

iframe[0].documentElement.innerHTML = code;

Angenommen, die URL zum Iframe stammt von derselben Domain wie die Webseite.

Question 5

Stellen Sie die ein document.designMode -Eigenschaft und versuchen Sie dann, den HTML-Code hinzuzufügen.

Siehe auch: Rich-Text-Bearbeitung in Mozilla