It is necessary to make a communication structure between the frame and the main window, checking when a navigation link within the frame is clicked and when the frame is loaded. To do this, you need to add a class for each link in the frame pages, for example:
<a class="navega" href=""></a>
Then add a onload attribute to the frame tag that will call the onLoadHandler() function when it is loaded:
<iframe onload="onLoadHandler()" src=""></iframe>
In the page code that contains the frame, add the JS below with the necessary functions:
<script>
window.Carregar = function(){
var elemDiv = document.createElement('div');
elemDiv.style.cssText = 'position:fixed;top:0;left:0;z-index:100;background:#000;color:#fff;';
elemDiv.appendChild(document.createTextNode("Carregando..."));
elemDiv.setAttribute("id", "carregando");
document.body.appendChild(elemDiv);
}
function onLoadHandler() {
var element = document.getElementById("carregando");
if(element){
element.parentNode.removeChild(element);
}
}
</script>
On each page to be loaded inside the frame (child pages), add the code:
<script>
var classname = document.getElementsByClassName("navega");
function myFunction() {
window.parent.Carregar();
}
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
}
</script>
Whenever a link with the class navigates is clicked inside the frame, it will display a "Loading ..." div in the main window. When the frame finishes loading, this div will be deleted.
