How to display an input as it is being typed within an iframe?

Question

I am attempting to display text while it is being written within a textarea inside an iframe. So it will be displayed as though through an external page.

The current code displays the input in the div with id "div". But I want to display it in an iframe instead, is that possible?

My current code is:

<script language='javascript'>
  function hot(){
    document.getElementById("div").innerHTML=document.getElementById("text").value
  }
  window.onload = function() {hot();};
</script>
<textarea id="text" onKeyUp="hot();"></textarea>
<div id="div"></div>

The problem is I want the input to display in an iframe and not a div. Thanks! — Ahmed Sa'eed, Jul 21 '13 at 17:26

lashab · Accepted Answer · 2013-07-21T19:34:33.600

1

<script type='text/javascript'>
  function hot(){
   window.frames['iframe'].document.body.innerHTML=document.getElementById("text").value
  }
</script>
<textarea id="text" onKeyUp="hot();"></textarea>
<iframe id = "iframe"></iframe>

http://jsfiddle.net/dD3R3/1/

edited Jul 21 '13 at 19:34

answered Jul 21 '13 at 19:28

lashab

186
1
7

Thank you! I picked it as the accepted answer just because it is simpler than the others :) – Ahmed Sa'eed Jul 21 '13 at 20:28

score 0 · Answer 2 · edited May 23 '17 at 12:29

Based on the answers to this question, the following code should do the trick:

<textarea id="text">Type &lt;b&gt;HTML&lt;/b&gt; here...</textarea><br>
<iframe id="frame">

$( function () {
    var $text = $( '#text' );
    var doc   = $( '#frame' )[0].contentWindow.document;
    var $body = $( 'body', doc );
    var hot = function () {
        $body.html( $text.val() );
    };
    $text.keyup( hot );
    hot();
} );

Here's a live demo of the code above on jsFiddle.

(I took the liberty of using jQuery, since you tagged your question with it, but it shouldn't be hard to translate this code back to pure JavaScript if that's what you prefer.)

How to display an input as it is being typed within an iframe?

2 Answers2