javascript - una - No se puede agregar el elemento<script>

script html ejemplos

Question

¿Alguna idea de por qué el fragmento de código siguiente no agrega el elemento de script al DOM?

var code = "<script></script>";
$("#someElement").append(code);

Answer 1

¡Quiero hacer lo mismo pero añadir una etiqueta de script en otro marco!

var url = ''library.js''; 
var script = window.parent.frames[1].document.createElement(''script'' ); 
script.type = ''text/javascript''; 
script.src = url;
$(''head'',window.parent.frames[1].document).append(script);

Answer 2

¿Qué quieres decir con "no trabajar"?

jQuery detecta que estás intentando crear un elemento SCRIPT y ejecutará automáticamente el contenido del elemento dentro del contexto global. ¿Me estás diciendo que esto no te funciona? -

$(''#someElement'').append(''<script>alert("WORKING");</script>'');

Edición: si no ve el elemento SCRIPT en el DOM (por ejemplo, en Firebug) después de ejecutar el comando, se debe a que jQuery, como dije, ejecutará el código y luego eliminará el elemento SCRIPT. Creo que los elementos SCRIPT siempre se agregan al cuerpo ... pero de todos modos, la ubicación no tiene absolutamente nada que ver con la ejecución del código en esta situación.

Answer 3

Adjuntar script al cuerpo:

$(document).ready(function() {
    $("<script>", {  src : "bootstrap.min.js",  type : "text/javascript" }).appendTo("body");
});

Answer 4

Es posible cargar dinámicamente un archivo JavaScript utilizando la función jQuery getScript

$.getScript(''http://www.whatever.com/shareprice/shareprice.js'', function() { Display.sharePrice(); });

Ahora se llamará al script externo y, si no se puede cargar, se degradará con gracia.

Answer 5

Escribí un paquete npm que le permite tomar una cadena HTML, incluidas las etiquetas de script y adjuntarla a un contenedor mientras se ejecutan los scripts.

Ejemplo:

import appendHtml from ''appendhtml'';

const html = ''<p>Hello</p><script src="some_js_file.js"></script>''; 
const container = document.getElementById(''some-div'');

await appendHtml(html, container);

// appendHtml returns a Promise, some_js_file.js is now loaded and executed (note the await)

Encuéntrelo aquí: https://www.npmjs.com/package/appendhtml

Answer 6

Esto es lo que creo que es la mejor solución. Google Analytics se inyecta de esta manera.

var (function(){
    var p="https:" == document.location.protocol ? "https://" : "http://";
        d=document,
        g=d.createElement(''script''),
        s=d.getElementsByTagName(''script'')[0];
        g.type=''text/javascript'';
        g.src=p+''url-to-your-script.js'';
        s.parentNode.insertBefore(g,s); })();

Answer 7

Esto funciona:

$(''body'').append($("<script>alert(''Hi!'');<//script>")[0]);

Parece que jQuery está haciendo algo inteligente con los scripts, por lo que debe adjuntar el elemento html en lugar del objeto jQuery.

Answer 8

He visto problemas en los que algunos navegadores no respetan algunos cambios cuando los haces directamente (por lo que me refiero a crear el HTML a partir del texto como si estuvieras intentando con la etiqueta de script), pero cuando los haces con comandos integrados las cosas van mejor Prueba esto:

var script = document.createElement( ''script'' );
script.type = ''text/javascript'';
script.src = url;
$("#someElement").append( script );

De: JSON para jQuery

Answer 9

Intenta esto puede ser útil:

var fileref=document.createElement(''script'');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src","scriptAnalytics.js");
document.getElementsByTagName("head")[0].appendChild(fileref);

Answer 10

La adición de sourceURL en el archivo de script ayudó como se menciona en esta página: https://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

1. En el archivo de script, agregue una declaración con sourceURL como "// @ sourceURL = foo.js"
2. Cargue el script usando jQuery $ .getScript () y el script estará disponible en la pestaña "fuentes" en las herramientas de desarrollo de Chrome

Answer 11

No necesita jQuery para crear un elemento DOM de script . Se puede hacer con vainilla ES6 así:

const script = "console.log(''Did it work?'')"
new Promise((resolve, reject) => {
  (function(i,s,o,g,r,a,m){a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.innerText=g;a.onload=r;m.parentNode.insertBefore(a,m)})(window,document,''script'',script, resolve())
}).then(() => console.log(''Sure did!''))

No necesita estar envuelto en una Promise , pero hacerlo le permite resolver la promesa cuando se carga la secuencia de comandos, lo que ayuda a prevenir las condiciones de carrera para las secuencias de comandos de larga ejecución.

Answer 12

Otra forma en que puede hacerlo si desea agregar un código es mediante el método document.createElement , pero luego use .innerHTML lugar de .src .

var script = document.createElement( ''script'' );
script.type = ''text/javascript'';
script.innerHTML = ''alert("Hey there... you just appended this script to the body");'';
$("body").append( script );

Answer 13

Probé este y funciona bien. Simplemente reemplace el símbolo < con ese /x3C .

// With Variable
var code = "/x3Cscript>SomeCode/x3C/script>";
$("#someElement").append(code);

o

//Without Variable
$("#someElement").append("/x3Cscript>SomeCode/x3C/script>");

Puedes probar el código here .

Answer 14

Puedo probar asi

var code = "<script></" + "script>";
$("#someElement").append(code);

La única razón por la que no puede hacer "<script></script>" es porque la cadena no está permitida dentro de javascript porque la capa DOM no puede analizar qué es js y qué es HTML.

Answer 15

Simplemente crea un elemento analizándolo con jQuery.

<div id="someElement"></div>
<script>
    var code = "<script>alert(123);<//script>";
    $("#someElement").append($(code));
</script>

Ejemplo de trabajo: https://plnkr.co/edit/V2FE28Q2eBrJoJ6PUEBz

Answer 16

Su script se está ejecutando, simplemente no puede usar document.write desde él. Use una alerta para probarlo y evite usar document.write . Las declaraciones de su archivo js con document.write no se ejecutarán y el resto de la función se ejecutará.

Answer 17

La buena noticia es:

Es 100% funcional.

Simplemente agregue algo dentro de la etiqueta del script, como alert(''voila!''); . La pregunta correcta que tal vez quiera preguntar, "¿Por qué no la vi en el DOM?" .

Karl Swedberg ha hecho una buena explicación al comentario del visitante en el sitio de API de jQuery . No quiero repetir todas sus palabras, puedes leer directamente aquí (me resultó difícil navegar por los comentarios allí) .

Todos los métodos de inserción de jQuery utilizan una función domManip internamente para limpiar / procesar elementos antes y después de que se inserten en el DOM. Una de las cosas que hace la función domManip es extraer los elementos de script que se van a insertar y ejecutarlos a través de una "rutina evalScript" en lugar de inyectarlos con el resto del fragmento DOM. Inserta los scripts por separado, los evalúa y luego los elimina del DOM.

Creo que una de las razones por las que jQuery hace esto es evitar los errores de "Permiso denegado" que pueden ocurrir en Internet Explorer al insertar scripts en ciertas circunstancias. También evita insertar / evaluar repetidamente el mismo script (lo que podría causar problemas) si está dentro de un elemento contenedor que está insertando y luego moviéndose alrededor del DOM.

Lo siguiente es que .append() cuáles son las malas noticias usando la función .append() para agregar un script.

Y la mala noticia es ...

No puedes depurar tu código.

No estoy bromeando, incluso si agregas debugger; palabra clave entre la línea que desea establecer como punto de interrupción, terminará obteniendo solo la pila de llamadas del objeto sin ver el punto de interrupción en el código fuente, (sin mencionar que esta palabra clave solo funciona en el navegador webkit, todos los otros principales los navegadores parecen omitir esta palabra clave) .

Si entiendes completamente lo que hace tu código, entonces esto será un pequeño inconveniente. Pero si no lo haces, terminarás agregando un debugger; palabra clave en todo el lugar para averiguar qué está mal con tu (o mi) código. De todos modos, hay una alternativa, no olvides que javascript puede manipular de forma nativa HTML DOM.

Solución alternativa

Usa javascript (no jQuery) para manipular HTML DOM

Si no desea perder la capacidad de depuración, puede utilizar la manipulación nativa de HTML DOM de JavaScript. Considera este ejemplo:

var script   = document.createElement("script");
script.type  = "text/javascript";
script.src   = "path/to/your/javascript.js";    // use this for linked script
script.text  = "alert(''voila!'');"               // use this for inline script
document.body.appendChild(script);

Ahí está, al igual que los viejos tiempos no es así. Y no olvide limpiar las cosas, ya sea en el DOM o en la memoria para todos los objetos a los que se hace referencia y que ya no son necesarios para evitar pérdidas de memoria. Puedes considerar este código para limpiar las cosas:

document.body.removechild(document.body.lastChild);
delete UnusedReferencedObjects; // replace UnusedReferencedObject with any object you created in the script you load.

El inconveniente de esta solución es que puede agregar accidentalmente un script duplicado, y eso es malo. Desde aquí puede imitar ligeramente la función .append() agregando una verificación de objeto antes de agregar, y eliminando el script del DOM justo después de agregarlo. Considera este ejemplo:

function AddScript(url, object){
    if (object != null){
        // add script
        var script   = document.createElement("script");
        script.type  = "text/javascript";
        script.src   = "path/to/your/javascript.js";
        document.body.appendChild(script);

        // remove from the dom
        document.body.removeChild(document.body.lastChild);
        return true;
    } else {
        return false;
    };
};

function DeleteObject(UnusedReferencedObjects) {
    delete UnusedReferencedObjects;
}

De esta manera, puede agregar un script con capacidad de depuración mientras está a salvo de la duplicidad del script. Esto es solo un prototipo, puede expandirse para lo que quiera que sea. He estado usando este enfoque y estoy bastante satisfecho con esto. Por supuesto, nunca .append() jQuery .append() para agregar un script.

Answer 18

<script>
    ...
    ...jQuery("<script></script>")...
    ...
</script>

El </script> dentro de la cadena literal termina el script completo, para evitar que se pueda usar "</scr" + "ipt>" .