Javascript 当递归呈现时，iframes的src被覆盖

我有一些使用递归数据模型为每个数据项创建iframe的代码：

<div id="1">
  <iframe>
  <div id="1.1">
    <iframe>
  </div>
</div>

出于某种原因，如果父iframe src最后设置为异步，则它也会用自己的替换子iframe的src。如果将其更改为堆叠模型，则效果良好：

<div id="1">
  <iframe>
</div>
<div id="1.1">
  <iframe>
</div>

代码在这里：。打开JavaScript控制台以查看无效请求。我故意使用了一个无效的域，以便在控制台中显示它

您可以通过更改注释掉的行来切换这两个选项。请注意，行的结尾在“$parent”和“$container”之间有所不同。如果将其设置为$container，则可能需要运行几次，以便在获得一个或多个“1-1”时，父级加载会持续一段时间，这就是问题所在

知道为什么将父容器传递给子容器会导致父容器拥有所有iFrame吗

代码的其余部分显示了我异步设置iframe src的原因

HTML:

JavaScript:

console.log('-------- NEW TEST --------');
var content = [
    { 
        id: '1' 
        ,children: [
            {
                id: '1.1'
                ,children: []
            }
            ,{
                id: '1.2' 
                ,children: []
            }
        ]
    }
]

$contentTemplate = $('#content').remove();

contentMap = [];
for(var c=0; c<content.length; c++) {
    contentMap.push(new Content(content[c])); 
}

renderContent(contentMap[0].getContent());

function renderContent(content, $parentIn) {
    var $parent = $parentIn || $('#contents');
    var $container = $contentTemplate
            .clone()
            .attr('id', content.id)
    $container.find('.contentTitle').text(content.id);
    $parent.append($container);
    for(var cc=0; cc<content.children.length; cc++) {
        // This works, but the layout isn't what I want
        renderContent(content.children[cc], $parent);
        // This doesn't work, but the layout is correct
        //renderContent(content.children[cc], $container);
    }
    $.when(content.promise).then(function(data) {
        $container
            .find('.contentFrame')
            .attr('src', 'http://invalidurl.invalid/'+data+'-'+content.id);
    });
}

function Content(contentIn) {
    var id = contentIn.id
        ,children = [];    

    if(contentIn.children.length > 0) {
        for(var cc=0; cc<contentIn.children.length; cc++) {
            children.push(new Content(contentIn.children[cc]));
        }
    }

    function getId() {
        return id;
    }

    function getContent() {
        var deferred = $.Deferred();
        var content = {
            promise: deferred.promise()
            ,id: id
            ,children: []
        }
        if(children.length > 0) {
            for(var c=0; c<children.length; c++) {
                content.children.push(children[c].getContent());
            }
        }
        // in app, this loads HTML, not the json example
        $.ajax({
            url: '/echo/json/'
            ,success: function() {
                deferred.resolve(id);
            }
        });
        return content;
    }
    return {
        getContent: getContent
        ,getId: getId
    }
}

这一行：

$container
.find('.contentFrame')
.attr('src', 'http://invalidurl.invalid/'+data+'-'+content.id);

---

从克隆的容器中搜索所有匹配的类。尝试为每个iframe分配唯一的id，并使用该id作为选择器设置url

请把实际代码也放在问题中。把它放在外部网站上会贬低原来的问题，使人们在将来更难看到问题和答案。JSFIDLE很好，也很受欢迎，但不应该是查看代码的唯一方式。即使它很长，我也在争论？是的！即使代码很长。另一方面，这许多iFrames显然是西斯尊主的作品，他执意破坏DOM的良好性质。@BentOnCoding……但这是必需的：这是一个内容管理系统，我不能信任第三方内容，第三方内容在设置iframe的内容库后需要相对的资产。。。这是第一步；沿着这条路，我们将开始解决这一切。唉……这一天就到了。