如何在 iframe 中键入输入时显示输入？答案

【问题标题】：How to display an input as it is being typed within an iframe?如何在 iframe 中键入输入时显示输入？
【发布时间】：2013-07-21 15:05:54
【问题描述】：

我正在尝试在 iframe 内的文本区域内写入文本时显示文本。所以它会像通过外部页面一样显示。

当前代码在 id 为“div”的 div 中显示输入。但是我想在 iframe 中显示它，这可能吗？

我当前的代码是：

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

【问题讨论】：

那么，您遇到了什么问题？
问题是我希望输入显示在 iframe 而不是 div 中。谢谢！

标签： php jquery iframe textarea

【解决方案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/

【讨论】：

谢谢！我选择它作为接受的答案只是因为它比其他的简单:)

【解决方案2】：

根据this question 的答案，下面的代码应该可以解决问题：

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

这是live demo of the code above on jsFiddle。

（我冒昧地使用了 jQuery，因为你用它标记了你的问题，但如果你喜欢的话，将这段代码翻译回纯 JavaScript 应该不难。）

【讨论】：