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?
mögliches Duplikat des Einfügens von HTML in einen Iframe (mit Javascript)
– Vivek Kodira
18. Juli 2014 um 6:28 Uhr
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>
Warum würden Sie den Iframe in Javascript erstellen? das scheint so eine schreckliche Art zu sein, es zu tun …
– Ein Freund
15. November 2017 um 18:13 Uhr
Mit jquery können Sie alles in einer Zeile erledigen
$("iframe").contents().find('html').html("Your new HTML");
Ersetzen Sie für Ihr Beispiel „iframe“ durch „#render“. Ich habe in “iframe” gelassen, damit andere Benutzer auf die Antwort verweisen können.
Ich bin mir nicht sicher, warum die akzeptierte Antwort abgelehnt wurde, aber für zukünftige Zuschauer dieser Frage ist diese Methode brillant und funktioniert 🙂
– Mickburkejnr
17. Juli 2015 um 9:10 Uhr
eine knappe Antwort. Vielen Dank
– riazosama
26. August 2020 um 10:05 Uhr
Versuchen
iframe[0].documentElement.innerHTML = code;
Angenommen, die URL zum Iframe stammt von derselben Domain wie die Webseite.
rahul
Stellen Sie die ein document.designMode -Eigenschaft und versuchen Sie dann, den HTML-Code hinzuzufügen.
mögliches Duplikat des Einfügens von HTML in einen Iframe (mit Javascript)
– Vivek Kodira
18. Juli 2014 um 6:28 Uhr