html5 iframe tab,html - IFrame in tab not loading - Stack Overflow

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

IT Support

Project Request

id="JotFormIFrame-yyyyyyyyy"

title="Service Desk"

οnlοad="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"

>

id="JotFormIFrame-xxxx"

title="Project Request Form"

οnlοad="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"

>

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();