如何在 div 中添加多个 iframe？答案

【问题标题】：How to add more than one iframe within of a div?如何在 div 中添加多个 iframe？
【发布时间】：2015-02-24 19:29:20
【问题描述】：

首先，对不起我的英语，但我不是本地人，这是我的第一篇文章（是的，我是这里的新成员）。

我有以下 HTML 和 jQuery 代码：

<div id="info" style="width: 100%; height:280px;">

if (sectores.getVisible()) {
  if (url1) { 
    $('#info').html('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url1 + '"></iframe>');
  } 
}
if (despachos.getVisible()) {
  if (url1) { 
    $('#info').html('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url2 + '"></iframe>');
  }
}

结果：它有效，但只显示最后一个“iframe”。我认为我需要将“iframe”放在堆栈或类似的东西中......但我不太确定。

所以，我想在 info 'div' 中显示多个 iframe。

【问题讨论】：

if 条件都为真吗？

标签： javascript jquery html iframe

【解决方案1】：

推荐的方法是将append iframe 放入父级。通常，这样做时，您会在任何附加操作之前清空父级：

var $info = $("#info");
$info.empty();

if (sectores.getVisible()) {
  if (url1) { 
    $info.append('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url1 + '"></iframe>');
  } 
}

if (despachos.getVisible()) {
  if (url1) { 
    $info.append('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url2 + '"></iframe>');
  }
}

如果您想执行更少的 DOM 修改或有一些特殊情况，您可以在将它们添加到 DOM 之前在字符串中构建多个元素：

var $info = $("#info");
$info.empty();

var info_html = "";

if (sectores.getVisible()) {
  if (url1) { 
    info_html += '<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url1 + '"></iframe>';
  } 
}

if (despachos.getVisible()) {
  if (url1) { 
    info_html += '<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url2 + '"></iframe>';
  }
}

$info.html(info_html);

【讨论】：

【解决方案2】：

您可以将第二个 iframe 放入第二个“div”吗？
我认为您的第二个会覆盖第一个。

【讨论】：

【解决方案3】：

您应该使用.append() 而不是.html()，否则第二个.html() 将写入第一个.html()

if (sectores.getVisible()) {
  if (url1) { 
    $('#info').append('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url1 + '"></iframe>');
  } 
}
if (despachos.getVisible()) {
  if (url1) { 
    $('#info').append('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url2 + '"></iframe>');
  }
}

【讨论】：

很高兴它有帮助，请考虑投票并将其标记为正确答案。

【解决方案4】：

当您使用.html() 时，您基本上是在用另一段代码覆盖一段代码。

你应该做的是：

$('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url1 + '"></iframe>').appendTo('#info');

【讨论】：