javascript - 在不切换的情况下将新 iframe 加载到 javascript 中折叠

Question

我有两个链接 - 每个链接都应分别将不同的 HTML 文件加载到 iframe 中。它们将被加载到同一个 javascript 折叠区域。我希望每个链接在单击时将指定的文件加载到 iframe 中。

我的问题是，如果将一个 html 文件加载到打开（显示）折叠区域，如果我单击第二个链接，折叠区域将切换为关闭。我想我需要一个 if/then js 脚本，但不确定正确的逻辑和语法？

它应该按预期在逻辑上运行：1）如果折叠区域是关闭的（默认情况下），当单击任何链接时，它应该打开然后加载 iframe 内容（HTML 文件）2）如果我单击第二个折叠打开时的链接，它应该保持打开（而不是切换关闭）并简单地加载第二个 iframe 内容（HTML 文件）

我下面的内容可以很好地“加载”正确的内容，但默认情况下会切换。因此，如果我在加载内容的情况下打开该区域，如果我单击第二个链接，它就会关闭。

这是我的片段：

<a href="#" onClick='document.getElementById("process_frame").src="html_file_1.php";' data-toggle="collapse" data-target="#content">LINK 1</a>

<a href="#" onClick='document.getElementById("process_frame").src="html_file_2.php";' data-toggle="collapse" data-target="#content">LINK 2</a>

<div id="content" class="collapse">
  <p><iframe id="process_frame" overflow="hidden" scrolling="no" frameborder="0" height="280" width="100%"></iframe></p>
</div>

任何建议或样品都会有所帮助...谢谢

标签： javascripthtmliframe

Answer 1

我将使用网站来演示您的问题的解决方案。该片段不显示结果，但您可以在此处查看小提琴。第二个解决方案在这里（显示在第二个片段中）；它特定于您的两个文件。您可能需要添加路径。这些是相当原始的解决方案，但由于您只在两个文件之间切换，也许这可能足以满足您的需求。

（我为 div（而不是 iframe）设置了背景颜色。如果你愿意，请删除它。。）

function togglediv(filename) {
  var frme = document.getElementById("process_frame");

  var file2 = filename;

  if (file2 == " " || filename == undefined) {
    frme.src = "http://www.richmondinnireland.com";
    file2 = frme.src;
  } else {
    frme.src = filename;
    file2 = frme.src;
  }
  //console.log(file2)
  // display frame is hidden 
  if (frme.style.display == 'none') {
    frme.style.display = 'block';
    frme.src = file2;
  }
}

#content {
  background-color: lightgrey;
  height: 280px;
  overflow: auto;
}

#process_frame {
  height: 280px;
  overflow: auto;
  width: 100%;
  z-index: 0;
}

<a href="#" id="link1" onClick='togglediv("http://www.hilaryshomeopathy.wordpress.com");' data-toggle="collapse" data-target="#content">LINK 1</a>

<a href="#" id="link2" onClick='togglediv();' data-toggle="collapse" data-target="#content">LINK 2</a>
<br><br>
<div id="content" class="collapse">
  <iframe id="process_frame" overflow="hidden" scrolling="no" frameborder="0" height="280" width="100%"></iframe>
</div>

<script>
</script>

#process_frame {
  height: 280px;
  overflow: auto;
  width:100%;
}

#file1,
#file2 {
  display: inline-block;
  margin: 5px;
}

<a href="#" id="file1" onClick='togglediv("1");' data-toggle="collapse" data-target="#content">File 1</a>


<a href="#" id="file2" onClick='togglediv("2");' data-toggle="collapse" data-target="#content">File 2</a>

<div id="content" class="collapse">
  <iframe id="process_frame" overflow="hidden" scrolling="no" frameborder="0" height="280" width="100%"></iframe>
</div>

<script>
  function togglediv(num) {
    var frme = document.getElementById("process_frame");
    var fileid = num;
    var filename = "html_file_";
    var filetoget = '"' + filename + num + ".php" + '"';
    console.log(filetoget);
    // check if frame is hidden 
    if (frme.style.display == 'none') {
      frme.style.display = 'block';
      frme.src = getfile;
    } /*else {
      //frme.style.display = 'none';
    }*/
  }
  </script>