Displaying 'loading' warning when update iframe - html

0

I'm having trouble with an application, where the screens take a long time to redirect. To get around the problem, I created a page with only an iframe, which contains navigation between pages.

The biggest problem is that it is not possible to switch windows faster because they are stored in a Siemens s7-1200 PLC.

Then, the idea of when the user changes pages within the iframe, a message that is loading is displayed.

That is, every time frame content updates , a loading message should appear.

For this I can use JavaScript and html.

Below is the code for the home page:

<iframe  id="ifr"  src="inicial.html" width="99.8%" border="0" height="800" ></iframe>

Within the iframe, there are menus for navigating to other pages within the iframe.

    
asked by anonymous 28.08.2017 / 15:02

1 answer

2

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.

    
28.08.2017 / 16:02