Javascript 编辑 iframe 时的内容为文本区域

Question

<script type="text/javascript">
function change() {
document.getElementById('target').getElementsByTagName('html').getElementsByTagName('body').innerHTML = document.getElementById('src').value;
}
</script>
<textarea id="src" onchange="change();"></textarea><br/>
<iframe id="target"></iframe>

这是我的代码，我不明白为什么它不起作用。请不要使用jQuery。我知道存在这样的事情，例如 htmledit squarefree 我尝试过框架而不是 iframe，但也没有奏效

Answer 1

这是你要找的吗？ 首先，我在文本区域上使用onkeyup，我认为文本区域没有onchange事件。 然后，我根据浏览器使用两种不同的方法抓取iframe，然后使用文本区域中的文本填充iframe。

<script type="text/javascript">
function change() {
  var iFrame =  document.getElementById('target');
   var iFrameBody;
   if ( iFrame.contentDocument ) 
   { // FF
     iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
   }
   else if ( iFrame.contentWindow ) 
   { // IE
     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
   }
    iFrameBody.innerHTML = document.getElementById('src').value;
}
</script>
<textarea id="src" onkeyup="change();"></textarea><br/>
<iframe id="target"></iframe>​

Answer 2

<script>
// Tested on Chrome 24 onchange is if you use backspace etc. use keyup for text
// It replaces n with <br/> if you don't want that wrap the content in a <pre> tag
    document.getElementById("src").onchange=document.getElementById("src").onkeyup=function(){
        document.getElementById('target').contentDocument.getElementsByTagName('body')[0].innerHTML = this.value.replace('n','<br/>');
    }
</script>