Código de JavaScript - Cargar un archivo JS o CSS en segundo plano, y controlar cuando ha terminado de cargarse en la pagina
Posted by lawebdelprogramador.com
Este código muestra como cargar un archivo JS o CSS en nuestra página de manera asyncrona, pudiendo controlar cuando termina de cargarse en la página.
Este código muestra como cargar un archivo JS o CSS en nuestra página de manera asyncrona, pudiendo controlar cuando termina de cargarse en la página.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Contenido de la pagina
</body>
<script>
/**
* Funcion que carga el archivo JS o CSS utilizando XMLHttpRequest
* Tiene que recibir:
* la url del archivo js o css
* la funcion a llamar cuando se haya cargado el contenido
*/
function getContent(url, callBackFunction)
{
try
{
// creamos el objeto XMLHttpRequest
var asyncRequest = new XMLHttpRequest();
// registramos cualquier evento
asyncRequest.onreadystatechange = function()
{
// Si develve "Done" (4) o ok (200)
if (asyncRequest.readyState==4 && asyncRequest.status==200)
{
// mamamos a la funcion pasada por parametro enviando el contenido
// del archivo descargado
callBackFunction(asyncRequest.responseText);
}
}
// Preparamos la peticion
asyncRequest.open('GET', url, true);
// enviamos la petición
asyncRequest.send(null);
}
catch(exception)
{
alert('Fallo en la peticion');
}
}
// Llamamos a la funcion getContent pasando como parametro el archivo JS a
// abrir y la funcion que tiene que ejecutar una vez se haya cargado el archivo
getContent("/js/miArchivo.js",function (code) {
// Creamos un nuevo elemento <script>
var s = document.createElement('script');
// añadimos dentro del <script> el contenido descargado
s.innerHTML=code;
// Lo añadimos encima del primer <script> de la pagina
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
/** EN ESTE PUNTO EL ARCHIVO YA SE HA CARGADO, Y PODEMOS GESTIONAR CUALQUIER
EVENTO O FUNCION **/
});
// Llamamos a la funcion getContent pasando como parametro el archivo CSS a
// abrir y la funcion que tiene que ejecutar una vez se haya cargado el archivo
getContent("/css/miArchivo.css",function (code) {
// Creamos un nuevo elemento <style>
var s = document.createElement('style');
// añadimos dentro del <style> el contenido descargado
s.innerHTML=code;
// Lo añadimos encima del primer <script> de la pagina
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
/** EN ESTE PUNTO EL ARCHIVO YA SE HA CARGADO, Y PODEMOS GESTIONAR CUALQUIER
EVENTO O FUNCION **/
});
</script>
</html>
http://www.lawebdelprogramador.com/codigo/JavaScript/3883-Cargar-un-archivo-JS-o-CSS-en-segundo-plano-y-controlar-cuando-ha-terminado-de-cargarse-en-la-pagina.html
Comentarios
Publicar un comentario