在iframe循环中显示URL

display URL in iframe loop

本文关键字：显示 URL 循环 iframe      更新时间：2023-09-26

我有这个iframe循环，

if ( query.length > 0) {
            $("#iframes-container").empty();
            for (var i = 0; i < query.length; i++) {
                var result = query.results[i];
                $("<iframe />", {
                    name: 'myFrame',
                    id:   'myFrame',
                    src: result.url,
                    width: 1024,
                    height : 650
                }).appendTo('#iframes-container');

效果很好。但是如果i 

$("<span>"+result.url+"</span>").appendTo('#iframes-container');

来显示url，它总是显示在iframe的右边，这扰乱了我的设计。

所以我添加了

span {
display: block;

}

在特定的iframe下显示url，但是这样的设计也很混乱，因为iframe不再相邻显示，而是一个在另一个下面显示。

那么我如何得到在iframe下的url，仍然让iframe被放置在彼此旁边?

谢谢

使用dom自制的浮动容器在div中同时包含iframe和p(或span)。

HTML: 

    <div id="iframes-container" class="clearfix"></div>

JS: 

for (var i = 0; i < 2; i++) {
    $("<div />", { class: 'floater', id: 'div_'+i}).appendTo('#iframes-container');
    $("<iframe />", {  width: 1024, height : 200, id: 'iframe_'+i, src: 'http://jsfiddle.net' }).appendTo('#div_'+i);
    $("<p>result line</p>").appendTo('#div_'+i);
}
CSS: 

#iframes-container { border: 1px solid #444; padding: 5px; }
.floater { float: left; width: 150px; height: 350px; border: 1px solid #333; overflow: scroll; }
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
    display: inline-block;
}
html[xmlns] .clearfix {
    display: block;
}
* html .clearfix {
    height: 1%;
}

完整的基本代码:http://jsfiddle.net/L3bg1w10/1/

相关文章：