javascript - 使用 jQuery 将 HTML 附加到 iframe

标签 javascript jquery html css iframe

我试过了 this但它没有用。

这是我的代码: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 之外。

最佳答案

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

$("iframe#result")[0].contentDocument would be correct .

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

关于javascript - 使用 jQuery 将 HTML 附加到 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24292566/

相关文章:

Javascript 小部件实现

javascript - knockout : How to Change Data for Same Model depending on Some condition

java - 我们可以再次使用相同的 websocket 连接吗?

javascript - Webpack: 'You may need an appropriate loader to handle this file type.' - 如何解决异步错误?

javascript - php 表单和同一页面上的多个结果自动刷新

javascript - 多级 Bootstrap 下拉列表的问题

javascript - 成功发布新闻后显示 Bootstrap 警告框

html - 渲染一个简单的聊天布局

jquery - 如何使用 jQuery 将 min-height 应用于 DIV?

javascript - 自定义 AWS Amplify 用户界面?