javascript - 如何在一个div内添加多个iframe？

Question

首先，抱歉我的英语不好，但我不是本地人，这是我的第一篇文章(是的，我是这里的新成员)。

我有以下 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”放入堆栈或类似的东西中......但我不太确定。

所以，我想在信息“div”中可视化多个 iframe。

Answer 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);