javascript - ventajas - tener amante ayuda al matrimonio
Cómo tener un script en el script<head> add al final del<body> (5)
Un cliente está utilizando Sharetribe que le permite agregar JS personalizado a través de administrador, pero solo en la cabeza. Quiero que mi script se cargue después de jQuery, pero jQuery se carga al final del cuerpo. ¿Cómo puedo escribir vanilla JS que agrega mi script principal al final una vez que el documento se carga?
Intenté esto:
<script>
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://cdn...";
document.body.appendChild(script);
var script2 = document.createElement("script");
script2.type = "text/javascript";
script2.text = "$(SOME.CODE.HERE);"
document.body.appendChild(script2);
</script>
Pero se ejecuta antes de que el documento termine de cargarse (y, en particular, antes de que jQuery esté disponible). Lo único que se me ocurre es establecer un temporizador, pero parece que tiene errores.
¿Algún consejo?
Cuando el navegador ejecuta su código en <head> , el elemento <body> aún no existía. Entonces, document.body fue null .
Para crear un script, el elemento <body> usa el evento ''load'' del document , por ejemplo:
.............
document.addEventListener(''load'', function(event){
var script = document.createElement(''script'');
...............
document.body.appendChild(script);
}, false);
............
Dile a tu código que espere a que el DOM termine de cargarse:
window.onload = function() {
var script = document.createElement("script");
script.type = "text/javascript";
//....
}
O usando jQuery:
$(document).ready(function() {
var script = document.createElement("script");
script.type = "text/javascript";
//....
});
Mientras espera que jQuery se cargue, simplemente puede ajustar su código dentro del método jQuery $(document).ready() :
$(document).ready(function() {
// Your code here.
});
Una página no se puede manipular de forma segura hasta que el documento esté "listo". jQuery detecta este estado de preparación para usted. El código incluido dentro de
$( document ).ready()solo se ejecutará una vez que la página Document Object Model (DOM) esté lista para que se ejecute el código JavaScript.
Me doy cuenta de que has mencionado que quieres esto en JS "vanilla", pero como estás esperando a que jQuery cargue, parece un tanto redundante.
$(document).ready(){} se ejecuta cuando su elemento dom se procesa correctamente.
Use el evento DOMContentLoaded :
El evento DOMContentLoaded se activa cuando el documento se ha cargado y analizado por completo, sin esperar a que las hojas de estilo, imágenes y subtramas finalicen la carga (el evento de carga se puede usar para detectar una página completamente cargada).
document.addEventListener("DOMContentLoaded", function (event) {
console.log("DOM fully loaded and parsed");
// Your code here
});
DOMContentLoaded es lo mismo que el evento ready de jQuery .