使用jQuery將HTML追加到iframe

這裏是我的代碼：JSFiddle

<script src='jquery.js' type='text/javascript'></script> 
<div id="body"> 
<textarea id="html"></textarea> 
<textarea id="javascript"></textarea> 
<textarea id="css"></textarea> 
<iframe id='result'> 
</iframe> 
</div> 
<script> 
    var iframe_ = $("iframe#result")[0].contentDocument.document; 
    console.log(iframe_); 
    var iframe = $("body", iframe_); 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    iframe.append(script) 
    iframe.append("<style type='text/css'></style><div id='r'></div>"); 
    $("div#body").css({ 
     background: "#f0f0f0", 
     padding: "5px", 
     width: "80%" 
    }); 
    $("iframe#result, textarea#html, textarea#css, textarea#javascript").css({ 
     width: "45%", 
     margin: "2.5px", 
     height: "250px", 
     border: "1px solid #ccc", 
     resize: "none", 
     background: "#fff" 
    }).on("keyup", function(){ 
     iframe.find("script").text = $("textarea#javascript").val(); 
     iframe.find("style").html($("textarea#css").val()); 
     iframe.find("div#r").html($("textarea#html").val()); 
    }); 
</script>

我的問題是，我想追加HTML的iframe，但它無法正常工作。它總是把HTML附加到iframe之外。

來源

2014-06-18 user3719477

有一個很好的教程，關於如何做到你想要的東西在這裏：http://code.tutsplus.com/tutorials/how-to-inject-custom-html-and-css-into-an-iframe--網22826。非常簡潔，易於遵循...在我的一個項目中使用它。 – jme11

'var iframe = $（「iframe＃result」）。contents（）。find（「body」）;' – epascarello

要小心如何添加新元素 - 您目前的設置看起來會不斷添加新塊而不是更新現有的塊，這將導致你的錯誤進一步下降 – JRulle

$("iframe#result")[0].contentDocument.document返回未定義。

$("iframe#result")[0].contentDocumentwould be correct。

PS：$("iframe#result").contents().find("body")works as well。

來源

2014-06-18 20:01:30 StrubT

使用jQuery將HTML追加到iframe

回答

相關問題