在iFrame-Javascript中动态添加HTML

我试图动态创建一个iFrame，并从当前文档向其中添加HTML。iFrame创建成功，但当函数到达需要添加HTML的位置时，它就不这样做了

这是我的密码：

function createiFrame(min, max, key) {
    console.log("Max-Width", max);

    //CREATING A CLASS FOR THE IFRAME
    var iframeClass = key + "-" + max;
    //var path = window.location.pathname;
    //var page = path.split("/").pop();

    //ADDING AN IFRAME INTO THE DOCUMENT AND ADDING ON THE CLASS
    $(document).ready(function() {
        $('<iframe>', {
            width: max
        }).addClass(iframeClass).prependTo('body');
    });


    var requiredHTML = document.getElementById('container').innerHTML;
    console.log("RequiredHTML", requiredHTML);

    //ADDING THE COLLECTED HTML INTO THE IFRAME -- THIS IS WHERE 
    //IT STOPS WORKING
    $('.' + iframeClass).ready(function() {
        console.log("iFrame ready");
        $('.' + iframeClass).contents().find('body').html("<p>Testing it out</p>");
    });

    var $head = document.getElementsByTagName('head')[0].innerHTML;
    $(document).ready(function() {
        $('.' + iframeClass).contents().find('head').append($head);
    });


}

函数createiFrame（最小、最大、关键点）{
控制台日志（“最大宽度”，最大）；
//为IFRAME创建一个类
变量iframeClass=键+“-”+最大值；
//var path=window.location.pathname；
//var page=path.split（“/”）.pop（）；
//在文档中添加IFRAME并在类上添加
$（文档）.ready（函数（）{
$('', {
宽度：最大
}).addClass（iframeClass）.prependTo（'body'）；
});
var requiredHTML=document.getElementById（'container'）.innerHTML；
log（“RequiredHTML”，RequiredHTML）；
//将收集的HTML添加到IFRAME中——这是
//它停止工作了
$（'.+iframeClass）.ready（函数（）{
控制台日志（“iFrame就绪”）；
$（'..+iframeClass.contents（）.find（'body'）.html（“测试它”
”；
});
var$head=document.getElementsByTagName（'head'）[0].innerHTML；
$（文档）.ready（函数（）{
$（'..+iframeClass）.contents（）.find（'head'）.append（$head）；
});
}

编辑

我意识到这个问题正在发生，因为当我尝试运行代码时，DOM还没有准备好

新问题

如何准备好DOM？

查看以下帖子：

你需要使用 $（'#myIFrame'）.load（函数（）{ ..

查看此帖子：

你需要使用 $（'#myIFrame'）.load（函数（）{

不起作用，因为准备就绪的iframe不会触发.ready（）正在等待的事件“DOMContentLoaded”。您需要直接引用文档，然后该文档将触发DOMContentLoaded事件。基于此，应该可以这样做

$(iframeClass document).ready(function() {
    ...
}

我要强调的是，这不是我以前尝试过的东西，但这似乎只是你指的是哪个文档的问题

不起作用，因为准备就绪的iframe不会触发.ready（）正在等待的事件“DOMContentLoaded”。您需要直接引用文档，然后该文档将触发DOMContentLoaded事件。基于此，应该可以这样做

$(iframeClass document).ready(function() {
    ...
}

---

我要强调的是，虽然这不是我以前尝试过的东西，但这似乎只是你所指的文档的问题。

这里回答了：@ChristopherKarlsson谢谢你的链接，但这个问题是关于嵌套iFrame的，答案与我在代码中的jQuery行相同，但它没有sn不工作是否有此帮助？您不能将jQuery处理程序附加到任何内容。它唯一的工作目标是当前文档。您必须使用本机

load（）

event。这里回答了：@ChristopherKarlsson谢谢你的链接，但这个问题是关于嵌套的iFrame的，答案给出了与我的代码中相同的jQuery行，但它不起作用。这有什么帮助吗？你不能将jQuery处理程序附加到任何东西上。它工作的唯一目标是当前文档。您必须使用本机

load（）

event。这里回答了：@ChristopherKarlsson谢谢你的链接，但这个问题是关于嵌套的iFrame的，答案给出了与我的代码中相同的jQuery行，但它不起作用。这有什么帮助吗？你不能将jQuery处理程序附加到任何东西上。它工作的唯一目标是当前文档。您必须改用本机

load（）

事件。