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>

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

Answer 1

我将使用网站来演示您的问题的解决方案。该代码段不显示结果，但您可以在此处view a fiddle。 second solution is here（如第二段所示）；它特定于您的两个文件。您可能必须添加路径。这些是非常原始的解决方案，但是由于您仅在两个文件之间切换，因此这可能足以满足您的需求。

（我为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>

将新的iframe加载到JavaScript中而无需切换即可折叠

1 个答案: