CODEWITHSUNDEEP
htmliframejotform
Tshezi
Tshezi

Reputation: 11

IFrame in tab not loading

I'm not a HTML coder and have been asked to help on an issue. I thought it would take 5 seconds but I have a bug. Its simply an html page with 2 tabs each with a Jotform iFrame embedded. When switching to the second tab(not default) , it doesnt load. I've swapped the default marker between tabs and it does the same. The debugger only shows the following violation but it is not an error:

[Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted' event. Consider using MutationObserver to make the page more responsive.

Code snippet

<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>

Upvotes: 1

Views: 247

Answers (0)

Related Questions