Javascript編輯iframe時textarea的內容

<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，但也沒有工作要麼Javascript編輯iframe時textarea的內容

來源

2012-10-10 Arcticfoxx

是this你在找什麼？首先我在textarea上使用onkeyup，我不認爲textarea有一個onchange事件。然後，我根據瀏覽器使用兩種不同的方法獲取iframe，然後使用textarea中的文本填充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>

來源

2012-10-10 03:20:46 davehale23

一件事的getElementsByTagName（ '身體'）[0] 如果只有一個人不能只是返回？我瞭解它的工作原理以及爲什麼會這樣做，謝謝你的簡單片段。 – Arcticfoxx

getElementsByTagName返回一個節點列表，參見文檔[https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByTagName]。不過，你可以使用'document.body' – davehale23

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

來源

2012-10-10 04:04:34 JJJ

Javascript編輯iframe時textarea的內容

回答

相關問題