Question

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

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

出于某种原因，如果父iframe src是最后设置的（它是异步的），它也会用子代替iframe的iframe的src。如果将其更改为堆叠模型，则可以正常工作：

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

代码在这里：http://jsfiddle.net/u3Aqk/2/。打开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
    }
}

Answer 1

这一行：

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

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

iframe的src在递归渲染时被覆盖

1 个答案: