Question

我尝试动态创建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);
    });


}

修改

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

所以新问题;

如何准备好DOM？

Answer 1

看看这篇文章： addEventListener to iFrame

你需要使用 $（ '＃myIFrame'）。负载（函数（）{ ....

Answer 2

$('.' + iframeClass).ready(function() {
    ...
}

无法正常工作，因为iframe准备就绪并未触发事件＆＃39; DOMContentLoaded＆＃39;哪个.ready（）正在等待。您需要直接引用文档，然后触发DOMContentLoaded事件。这应该基于此。

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

我会强调，这不是我之前尝试过的事情，但似乎只是你所指的文件的问题。

动态地将HTML添加到iFrame中 - Javascript

2 个答案: