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
– Ahmed Sa'eed, Commented Jul 21, 2013 at 17:26

lashab · Accepted Answer · 2013-07-21 19:34:33Z

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, 2013 at 19:34

answered Jul 21, 2013 at 19:28

lashab

1861 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ahmed Sa'eed Over a year ago

Thank you! I picked it as the accepted answer just because it is simpler than the others :)

Community · Accepted Answer · 2017-05-23 12:29:18Z

0

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

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Jul 21, 2013 at 19:24

Ilmari Karonen

50.5k9 gold badges96 silver badges156 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related