IFrame во вкладке не загружается - PullRequest
Новая
       25

IFrame во вкладке не загружается

1 голос
/ 06 февраля 2020

Я не HTML кодер, и меня попросили помочь в решении проблемы. Я думал, что это займет 5 секунд, но у меня есть ошибка. Это просто страница html с двумя вкладками, каждая со встроенным Jotform iFrame. При переключении на вторую вкладку (не по умолчанию) она не загружается. Я поменял маркер по умолчанию между вкладками, и он делает то же самое. Отладчик показывает только следующее нарушение, но это не ошибка:

[Нарушение] Добавлен синхронный слушатель мутации DOM в событие 'DOMNodeInserted'. Попробуйте использовать MutationObserver, чтобы сделать страницу более отзывчивой.

Фрагмент кода 

<html>
<body>

<div class="tab">
  <button class="tablinks active" onclick="openTab(event, 'ITSupport')" ><B>IT Support</B></button>
  <button class="tablinks" onclick="openTab(event, 'ProjectRequest')" ><B>Project Request</b></button>

</div>

<div id="ITSupport" class="tabcontent">
 <iframe
      id="JotFormIFrame-yyyyyyyyy"
      title="Service Desk"
      onload="window.parent.scrollTo(0,0)"
      allowtransparency="true"
      allowfullscreen="true"
      allow="geolocation; microphone; camera"
      src="https://form.myjotform.com/yyyyyy"
      frameborder="0"
      style="
      min-width: 100%;
      height: 100%;
      border:none;"
      scrolling="no"
    >
    </iframe>

</div>

<div id="ProjectRequest" class="tabcontent">
     <iframe
      id="JotFormIFrame-xxxx"
      title="Project Request Form"
      onload="window.parent.scrollTo(0,0)"
      allowtransparency="true"
      allowfullscreen="true"
      allow="geolocation; microphone; camera"
      src="https://form.jotform.com/xxxxxxx"
      frameborder="0"
      style="
      min-width: 100%;
      height: 100%;
      border:none;"
      scrolling="no"
    >
    </iframe>


</div>


<script>
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  var allIds = document.querySelectorAll('#' + tabName);
  allIds[allIds.length - 1].style.display = "block";
  evt.currentTarget.className += " active";
}

document.querySelector('.tablinks.active').click();
</script>

</body>
</html>
...