Wstaw HTML do iframe

Tworzę edytor HTML w przeglądarce. Używam zakreślacza składni o nazwie Code Mirror, który jest bardzo dobry.Wstaw HTML do iframe

Moja konfiguracja to element iframe zawierający widok edytowanej strony oraz obszar tekstowy, w którym znajduje się zwykły tekst HTML, edytowany przez użytkownika.

Próbuję wstawić edytowany kod HTML z textarea do elementu iframe, który wyświetla, że renderował HTML.

Czy to możliwe? Próbowałem następujące: setup

HTML:

<iframe id="render"> 

</iframe> 

<textarea id="code"> 
HTML WILL BE 

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

JQuery konfiguracji:

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

To nie wydaje się załadować HTML do iframe, czy istnieje specjalna metoda wstawić HTML do elementu iframe, czy nie jest to możliwe?

Cheers

Eef

Źródło

2009-10-14 RailsSon

możliwy duplikat [wstawiania html wewnątrz elementu iframe (przy użyciu javascript)] (http://stackoverflow.com/questions/620881/putting-html-inside-an-iframe-using-javascript) –

-1

Ustaw właściwość

document.designMode

a następnie spróbuj dodać HMTL

Czytaj

Rich-Text Editing in Mozilla

również

Źródło

2009-10-14 12:05:41 rahul

To samo co 'document. contenteditable = "true" '? – JCOC611

spróbować

iframe[0].documentElement.innerHTML = code;

Zakładając, że url do iframe jest z tej samej domeny, co strony.

Źródło

2009-10-14 12:04:28 Marius

Problem ten podsłuch mnie zbyt i fina lly znalazłem rozwiązanie.

Jest spóźniony, ale doda wartość innym odwiedzającym, którzy mogą potrzebować poprawek.

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

Źródło

2011-02-13 17:00:20 OpenCode

dlaczego stworzysz iframe w javascript? wydaje się, że to straszny sposób ... – Jesus

Można zrobić to wszystko w jednej linii z jQuery

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

Zobacz demo działa tutaj http://jsfiddle.net/dWpvf/972/

Zamień "iframe" z "#render" dla przykładu. Zostawiłem element "iframe", aby inni użytkownicy mogli odwołać się do odpowiedzi.

Źródło

2015-02-27 16:43:26

Nie wiem, dlaczego zaakceptowana odpowiedź została odrzucona, ale dla przyszłych widzów na to pytanie ta metoda jest genialna i działa :) – mickburkejnr

Wstaw HTML do iframe

Odpowiedz

Powiązane problemy