HTML in iframe einfügen

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

Mein Setup ist ein Iframe, der eine Ansicht der Seite enthält, die gerade bearbeitet wird, und ein Textfeld, in dem der HTML-Text im Klartext steht, den der Benutzer bearbeitet.

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

Ist das möglich? Ich habe versucht, den folgenden:

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 nicht zu dem HTML-Code in den iframe zu laden, gibt es eine spezielle Methode zum Einfügen von HTML in einen iframe oder ist das nicht möglich?

Prost

Eef

Quelle

2009-10-14 RailsSon

möglich duplikat von [putting html innerhalb eines iframe (mit javascript)] (http://stackoverflow.com/questions/620881/putting-html-inside-an-iframe-using-javascript) –

-1

das Set

document.designMode

Eigenschaft und dann versuchen, die HMTL Zugabe

lesen

Rich-Text Editing in Mozilla

auch

Quelle

2009-10-14 12:05:41 rahul

Das selbe wie 'document. contenteditable = "wahr" '? – JCOC611

versucht

iframe[0].documentElement.innerHTML = code;

Unter der Annahme, dass die URL zum iframe aus der gleichen Domäne wie die Webseite ist.

Quelle

2009-10-14 12:04:28 Marius

Dieses Problem mich auch abgehört und fina Ich habe eine Lösung gefunden.

Es ist spät, aber wird einen Mehrwert für andere Besucher, die möglicherweise eine ordnungsgemäße Reparatur 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>

Quelle

2011-02-13 17:00:20 OpenCode

Warum würden Sie den iframe in Javascript erstellen? das scheint so ein schrecklicher Weg, es zu tun ... – Jesus

Sie können alles auf einer Linie tun mit jquery

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

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

Ersetzen "iframe" mit "#render" für Ihr Beispiel. Ich habe in "iframe" gelassen, damit andere Benutzer auf die Antwort verweisen können.

Quelle

2015-02-27 16:43:26

Nicht sicher, warum die akzeptierte Antwort wurde downvoted, aber für zukünftige Zuschauer auf diese Frage ist diese Methode brillant und funktioniert :) – mickburkejnr

HTML in iframe einfügen

Antwort

Verwandte Themen