How to update an iframe without refreshing the page?

Question

I’m making a system, more precisely, a code editor HTML and CSS online, where I need to send two fields via POST to a php page, which will process the data and save it in a random name html file, generated at each page update.

So far so good, I’m sending this data via AJAX to prevent the page from giving refresh and the file name changes.

On the same page is a iframe which refers to the created html page, only when sending the data via AJAX and save in html file, I should give a reload in the iframe to update the file to which it refers, in this way:

document.getElementById("myIframe").contentWindow.location.reload();

The problem is there, time to give the reload in the iframe, the whole page is updated (I say this because the upload icon appears as in the image below.)

Which brings about the generation of a new file name, which, as I said, every page update a new name is generated, and the change of the src of iframe, pointing to a new blank file and not to the file that contained the code.

Answer 1

Well, nowadays I don’t encourage the use of iframes, after I discovered some errors that it may entail regarding the passing of parameters and everything else....

But a while ago I found the following solution:

function carregaiframe(src, id) {
   window.open(src, id);
}

The call of the function I do so:

carregaiframe("nomeSite.php?parametro=" + paramentro,"nomeDoIframe");

Every time you call the function, it will load the iframe again..

For this type of need, I recommend using Ajax instead of loading the content into a iframe, Voce carries it in a div

As follows:

$.ajax({
    type: "GET",
    data: { 
        parametros1: parametro1,
        parametros2: parametro2
        },
    url: "conteudo.php",
    success: function(data) {
        $('#conteudo').html(data);
    }
});

On the page HTML just reference your JS add the lib JQuery and add the following line:

<div id="conteudo"></div>

Because it is more advisable to work with AJAX than with Iframes?

• Here is discussed as to why the use of Iframes is considered a bad practice
• Another problem I discovered in But, is that the browser Safari by default does not work well with Iframes when there are váriaveis de sessão involved in the play.

In the browser Safari in particular... when we use a Iframe the browser reads the link that should be rendered within it as being from another domain, so it does not exchange session variables... For other browsers that have the same logic, this same problem will also occur.