Inserisci HTML in iframe

Sto creando un editor HTML nel browser. Sto usando l'Evidenziatore di sintassi chiamato Code Mirror che è molto buono.Inserisci HTML in iframe

La mia configurazione è un iframe che contiene una vista della pagina che si sta modificando e un'area di testo su cui si trova il testo HTML HTML che l'utente modifica.

Sto tentando di inserire l'HTML modificato dalla textarea nell'iframe che mostra l'HTML reso.

È possibile? Ho provato quanto segue: setup

HTML:

<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) 
})

Questo non sembra per caricare il codice HTML in iframe, c'è un metodo speciale per inserire codice HTML in un iframe o non è possibile?

Acclamazioni

Eef

fonte

2009-10-14 RailsSon

possibile duplicato di [inserire html all'interno di un iframe (utilizzando javascript)] (http://stackoverflow.com/questions/620881/putting-html-inside-an-iframe-using-javascript) –

-1

Impostare la proprietà

document.designMode

e quindi provare ad aggiungere l'HTML

Leggi

Rich-Text Editing in Mozilla

anche

fonte

2009-10-14 12:05:41 rahul

Come per 'documento. contenteditable = "true" '? – JCOC611

cercano

iframe[0].documentElement.innerHTML = code;

Supponendo che l'url per l'iframe è dalla stesso dominio della pagina web.

fonte

2009-10-14 12:04:28 Marius

Questo problema mi infastidiva troppo e fina soluzione trovata da poco.

È tardi, ma aggiungerà valore ad altri visitatori che potrebbero aver bisogno di una correzione adeguata.

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

fonte

2011-02-13 17:00:20 OpenCode

perché dovresti creare l'iframe in javascript? sembra un modo terribile di farlo ... – Jesus

Si può fare tutto su una riga con jQuery

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

Vedi demo funzionante qui http://jsfiddle.net/dWpvf/972/

Sostituire "iframe" con "# RENDERING" per il vostro esempio. Ho lasciato in "iframe" in modo che altri utenti possano fare riferimento alla risposta.

fonte

2015-02-27 16:43:26

Non so perché la risposta accettata è stata downvoted, ma per i futuri spettatori a questa domanda, questo metodo è geniale e funziona :) – mickburkejnr

risposta

Problemi correlati