How to update and execute the rest of the function?

2

Well, I'm running the following code that modifies the content of the iframe, and since both pages are in my site this goes without problems (it's not the problem):

<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="demo_iframe.htm"></iframe>    
<p>Click the button to change the background color of the document contained in the iframe.</p>    
<p id="demo"></p>    
<button onclick="myFunction()">Try it</button>    
<script>
function myFunction() {
    var x = document.getElementById("myframe");
    var y = x.contentDocument;
    y.body.style.backgroundColor = "red";
}
</script>    
</body>
</html>

The page I post is as follows:

<html><head></head><body>
<p>This is some text in an iframe. This is some text in an iframe. This is some text in an iframe. This is some text in an iframe. This is some text in an iframe. This is some text in an iframe.</p>
</body></html>

What matters: I need that when loading my page in the iframe, the page I post will be updated.

How to execute myFunction (), update the page and continue with the rest of the function? (but update the page before continuing with the function, it just does not work for me)

I tried uselessly with the following code, if it updates but does not execute the rest of the function that I also need:

<script>
    function myFunction() {
    var x = document.getElementById("myframe");

    var w = x.contentDocument;
            w.location.reload();

    var y = x.contentDocument;
    y.body.style.backgroundColor = "red";
}
</script>  
    
asked by Manuel b 27.10.2017 в 14:13
source

4 answers

1

You can use the onload function of the iframe that is executed when the iframe ends loading:

<iframe onload="myFunction()" id="myframe" src="demo_iframe.htm"></iframe>  

So whenever you refresh the iframe, the function will be executed.

    
answered by 27.10.2017 в 14:25
0

Here is an example of how you could use onload to do what you want.

//Esta función se encargará de recargar el iFrame
function recargarIframe() {
    var x = document.getElementById("myframe"),
         w = x.contentDocument;
    w.location.reload();
}

//Esta de cambiar el color
function cambiarColor() {
    var x = document.getElementById("myframe"),
        w = x.contentDocument;
    //Cambiamos el color
    w.body.style.backgroundColor = "red";
}

In HTML :

<iframe onload="cambiarColor()" id="myframe" src="pagina.htm"></iframe>

The recargarIframe function is called when you want to update that iframe , and the cambiarColor function when the iframe was loaded.

    
answered by 30.10.2017 в 14:27
-1

I do not know if it will be what you need ...

I have the following code JS:

function insertarHTML() {
    var i, etiqueta, elmto, fich, llamada;
    etiqueta= document.getElementsByTagName("*");
    for (i=0; i < etiqueta.length; i++) {
        elmto = etiqueta[i];
        fich=elmto.getAttribute("incluir-html");
        if (fich) {
            llamada = new XMLHttpRequest();
            llamada.onreadystatechange= function () {
                if (this.readyState==4 && this.status==200) {
                    elmto.innerHTML = this.responseText;
                    elmto.removeAttribute("incluir-html");
                    insertarHTML();
                }
            }
        llamada.open("GET", fich, true);
        llamada.send();
        return;
        }
    }
};

In the HTML code include in the tag you need to include the HTML modifier: include-html="external_file" (can be used in any html tag iframe, div, p, span etc. .)

You can also put all the 'include-html' you want, since as soon as you launch the insertHTML function, the entire DOM is refreshed and updated in the recursive mode and includes all the resources external HTML that you have included (tb, it is valid for txt, etc ...)

That is to say in the HTML where I want the external "resource" inserted:

<html>
....
<body>
  ....
  <div incluir-html="contenido.html"></div>
   ...
 <p incluir-html="parrafo_copyleft.txt"></p>
 .... 
   <script>insertarHTML();</script>
</body>

The "final trick", as you can see is that at the end of the HTML code before closing the "body" launch the function that runs the entire DOM of the document and includes external files.

If you do not want it to load automatically, assign the function call to a button and it will be launched when pressed.

    
answered by 27.10.2017 в 15:35
-1

If you need a function and then another the easiest way would be to have them in a separate javascript file (file.js) and in this you write the two functions that work for you:

function Uno() {
...
}

function Dos() {
...
}

And you include a third function that calls them in the order you want:

function LlamandoATodas() {
 // LLamamos de una en una a otras funciones :-D
 Una();
 Dos();
}

In your HTML you only call " CallingAttachments (); " and you would already have it ...

    
answered by 01.11.2017 в 19:36