首先是frame结构(可以取名叫htmledit.html)

<html>
<head>
<title>Real-time HTML Editor</title>
</head>

<!-- about:blank confuses opera.. -->

<frameset resizable="yes" rows="50%,*">
 <frame name="editbox" src="editbox.html">
 <frame name="dynamicframe" src="javascript:'-'">
</frameset>

</html>

然后是editbox.html的内容：

<html>
<head>

<script>
var old = '';
function update()
{
  var textarea = document.f.ta;
  var d = top.dynamicframe.document;

  if (old != textarea.value)
  {
    old = textarea.value;
    d.open();
    d.write(old);
    d.close();
  }
  window.setTimeout(update, 150);
}
</script>

<style>
.expand { width: 100%; height: 100%; }
.close { border: none; margin: 0px; padding: 0px; }
html,body { overflow: hidden; }
</style>

</head>

<body class="expand close" onload="update(); document.f.ta.select();">
<form class="expand close" name="f">
<textarea class="expand close" style="background-color: #def" name="ta" wrap="hard"
>&lt;h3&gt;Welcome to the real-time HTML editor!&lt;/h3&gt;
&lt;p&gt;Type HTML in the textarea above, and it will magically appear in the frame below.&lt;/p&gt;</textarea>
</form>
</body>
</html>