Displaying 'load' warning when iframe update - html

Asked

Viewed 737 times

0

I’m having trouble with an app, where the screens take a while to redirect. To get around the problem, I created a page with just an iframe, which contains the navigation between pages.

The bigger problem is that it is not possible to make window changes faster as they are stored in a Siemens S7-1200 PLC.

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

That is, every time update frame content, a message should appear from.

For this I can use Javascript and html.

Below follows code from the home page:

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

Inside the iframe, there are menus for navigations to other pages, inside the iframe.

  • It is good to always post some relevant part of the code, greatly facilitates the understanding of the question and a possible quick and accurate answer. Otherwise generates mts comments with requests for more explanations.

  • From what I understand, the page contains a frame where the pages change within frame, IE, the URL in the browser remains the same?

  • That’s right @Dvdsamm. However, each time the pages change within the iframe, I need a loading message to be displayed. For the exchange between pages is slow.

1 answer

2


You need to make a communication structure between the frame and the main window, checking when a navigation link inside 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 an attribute onload in the tag of the frame that will call the function onLoadHandler() when it is loaded:

<iframe onload="onLoadHandler()" src=""></iframe>

In the code of the page containing the frame (parent page), 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 within 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 navigate is clicked inside the frame, will display a div "Loading..." in the main window. When the frame is finished loading, this div will be deleted.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.