Загрузка нового 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>

Любые предложения или примеры будут полезны ...Спасибо

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>