javascript - funcion - mostrar loading mientras carga pagina jquery
¿Cómo insertar dinámicamente una etiqueta<script> a través de jQuery después de cargar la página? (9)
Aquí hay una manera mucho más clara, sin necesidad de jQuery, que agrega un script como el último hijo de <body> :
document.body.innerHTML +=''<script src="mycdn.js"><//script>''
Pero si desea agregar y cargar guiones, use el método de Rocket Hazmat .
Tengo problemas para hacer que esto funcione. Primero intenté establecer las etiquetas de script como cadenas y luego usar jquery replaceWith () para agregarlas al documento después de cargar la página:
var a = ''<script type="text/javascript">some script here</script>'';
$(''#someelement'').replaceWith(a);
Pero obtuve errores literales de cadena en esa var. Luego intenté codificar la cadena como:
var a = ''&left;script type="text/javascript">some script here<//script>'';
pero enviar eso a replaceWith() solo esa cadena al navegador.
¿Puede alguien decirme cómo haría para agregar dinámicamente una etiqueta <script> en el navegador después de cargar la página, idealmente a través de jQuery?
Ejemplo:
var a = ''<script type="text/javascript">some script here</script>'';
$(''#someelement'').replaceWith(a);
Deberia de funcionar. Lo intenté; mismo resultado. Pero cuando usé esto:
var length = 1;
var html = "";
for (var i = 0; i < length; i++) {
html += ''<div id="codeSnippet"></div>'';
html += ''<script type="text/javascript">'';
html += ''your script here'';
html += ''</script>'';
}
$(''#someElement'').replaceWith(a);
Esto funcionó para mí.
Editar: Olvidé el #someelement (por cierto, podría querer usar #someElement debido a las convenciones)
Lo más importante aquí es el + = por lo que el html se agrega y no se reemplaza.
Deja un comentario si no funcionó. ¡Me gustaría ayudarte!
Esta es la forma correcta de hacerlo con JQuery moderno (2014):
$(function () {
$(''<script>'')
.attr(''type'', ''text/javascript'')
.text(''some script here'')
.appendTo(''head'');
})
o si realmente quieres reemplazar un div puedes hacer:
$(function () {
$(''<script>'')
.attr(''type'', ''text/javascript'')
.text(''some script here'')
.replaceAll(''#someelement'');
});
Esta respuesta es técnicamente similar o igual a lo que respondió jcoffland. Acabo de agregar una consulta para detectar si un script ya está presente o no. Lo necesito porque trabajo en un sitio web de Intranet con un par de módulos, algunos de los cuales comparten scripts o traen los suyos, pero estos scripts no necesitan cargarse cada vez más. Estoy usando este fragmento desde hace más de un año en el entorno de producción, funciona como un encanto. Comentando a mí mismo: Sí, lo sé, sería más correcto preguntar si existe una función ... :-)
if (!$(''head > script[src="js/jquery.searchable.min.js"]'').length) {
$(''head'').append($(''<script />'').attr(''src'',''js/jquery.searchable.min.js''));
}
Hay una solución alternativa que suena más a un truco y estoy de acuerdo en que no es la manera más elegante de hacerlo, pero funciona al 100%:
Digamos que su respuesta AJAX es algo así como
<b>some html</b>
<script>alert("and some javscript")
Tenga en cuenta que me salté la etiqueta de cierre a propósito. Luego, en la secuencia de comandos que carga lo anterior, haga lo siguiente:
$.ajax({
url: "path/to/return/the-above-js+html.php",
success: function(newhtml){
newhtml += "<";
newhtml += "/script>";
$("head").append(newhtml);
}
});
Simplemente no me preguntes por qué :-) Esta es una de esas cosas a las que he llegado como resultado de pruebas desesperadas casi al azar y falla.
No tengo sugerencias completas sobre cómo funciona, pero, curiosamente, NO funcionará si agrega la etiqueta de cierre en una línea.
En momentos como estos, siento que he dividido con éxito por cero.
Pruebe lo siguiente:
<script type="text/javascript">
// Use any event to append the code
$(document).ready(function()
{
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://scriptlocation/das.js";
// Use any selector
$("head").append(s);
});
Puede colocar el script en un archivo separado, luego use $.getScript para cargarlo y ejecutarlo.
Ejemplo:
$.getScript("test.js", function(){
alert("Running test.js");
});
Si está intentando ejecutar algo de JavaScript generado dinámicamente, estaría un poco mejor utilizando eval . Sin embargo, JavaScript es un lenguaje tan dinámico que realmente no debería necesitarlo.
Si el script es estático, entonces la getScript de getScript Rocket es el camino a seguir.
Una forma más simple es:
$(''head'').append(''<script type="text/javascript" src="your.js"></script>'');
También puede usar este formulario para cargar css.