如何在 iframe 中添加动态内容..？答案

【问题标题】：How to add dynamic content inside the iframe..?如何在 iframe 中添加动态内容..？
【发布时间】：2016-11-15 09:55:27
【问题描述】：

我正在使用具有 src="" 的 javascript 创建一个 iframe 元素，因为我不想从 url 加载 html。我想使用 javascript 更改 iframe 的 html。我的 iframe 元素是

window.onload = function () {
    var html = '';
    html += '<div id="myModal" class="modal fade"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">';
    html += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title">Preview</h4></div>';
    html += '<div class="modal-body" style="height:450px; width:100%; margin-top: -17px; margin-left: -17px;">';
    html += '<iframe id="myiframe" src="" onload="editContent();" width="100%" height="100%" style="position:fixed;border-width: 0;" allowtransparency="true">';
    html += '</iframe></div></div></div></div>';
    document.body.innerHTML += html;

    var iframe = document.getElementById('myiframe'),
        iframedoc = iframe.contentDocument || iframe.contentWindow.document;
    iframedoc.body.innerHTML = '<h1>Test h1</h1><h2>Test h2</h2><h3>Test h3</h3><h4>Test h4</h4><h5>Test h5</h5><h6>Test h6</h6>';
}

但它不会在 iframe 中添加内容，如果我在控制台中查看，iframe 仍然是空的。那里有什么错误..？

【问题讨论】：

您的代码应该并且确实可以正常工作：jsfiddle.net/oam44y0e。请检查控制台是否有错误，并更新您的答案以包含问题的工作示例
嘿@RoryMcCrossan 当我在控制台中查看时，iframe 的正文元素内没有任何内容。浏览器也不渲染任何东西
从小提琴中可以看出，它工作得非常好。为了帮助您，我们需要查看您的无效代码。这里没有足够的信息。
这仍然可以正常工作：jsfiddle.net/oam44y0e/1
只要脚本正确加载，它的来源就没有任何影响。如果您无法生成示例，则需要自己诊断问题的根源 - 逐行删除代码，直到它适合您

标签： javascript jquery html iframe

【解决方案1】：

我找到了我的问题的解决方案，我正在尝试在 iframe 中添加 html 数据，然后才能正确创建它。所以我使用了 settimeout() 并编写了我的 js 代码来在其中添加内部 html。所以它现在工作正常。

setTimeout(function () {
    var iframe = document.getElementById('myiframe'),
        iframedoc = iframe.contentDocument || iframe.contentWindow.document;
    iframedoc.body.innerHTML = '<h1>Test h1</h1><h2>Test h2</h2><h3>Test h3</h3><h4>Test h4</h4><h5>Test h5</h5><h6>Test h6</h6>';
},500);

【讨论】：