-1

我有一些代码使用递归数据模型为每个数据项创建一个 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>

代码在这里：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
    }
}
4

1 回答 1

2

这一行：

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

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

于 2013-09-04T18:18:51.257 回答