I created a web site to load different maps (ArcGIS online web applications) by using tabs. I used iframes to switch between maps. It works but I have a little issue. The maps are not downloaded correctly, some layers are not visible. I should refresh every time before clicking on the buttons loading the maps. Any idea loading the maps without clicking on refresh button each time. Thanks in advance. I used this code:
`
<button class="tablinks" onclick="loadMAP(event, 'MAP1')">Map1</button>
<button class="tablinks" onclick="loadMAP(event, 'MAP2')">Map2</button>
<button class="tablinks" onclick="loadMAP(event, 'MAP3')">Map3</button>
</div>
<!-- Tab content -->
<div id="Map1" class="tabcontent">
<iframe id="map1frame" width="500" height="400" frameborder="1" scrolling="no"
marginheight="0" marginwidth="0"
src="link to the map1"></iframe>
</div>
<div id="Map2" class="tabcontent">
<iframe id="map2frame" width="500" height="400" frameborder="1" scrolling="no"
marginheight="0" marginwidth="0"
src="Link to the map2"></iframe>
</div>
<div id="Map3" class="tabcontent">
<iframe id="map3frame" width="500" height="400" frameborder="1" scrolling="no" marginheight="0" marginwidth="0"
src="Link to the map3"></iframe>
</div>
<script>
function loadMAP(evt, MAPname) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
location.reload();
document.getElementById(MAPname).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
`