Compruebe si existe script Javascript en la página

Question

Tengo un bookmarklet que hice y carga un script de mi servidor en la página actual de los usuarios. Sin embargo, tengo una verificación if en mi script que, si no se cumple una condición, no se realiza ninguna acción. Sin embargo, si el usuario cumple con esa condición, se ejecuta el código, pero ha provocado que haya dos conjuntos de scripts insertados en su página. ¿Puedo prevenir esto?

<a href="javascript: (function() { 
    var jsCode = document.createElement('script'); 
    jsCode.setAttribute('src', 'http://xxx.co.uk/xxx/script.js'); 
    document.body.appendChild(jsCode); 
}());">Bookmarklet</a> 

Answer 1

puede comprobar si la secuencia de comandos se carga así:

function isMyScriptLoaded(url) { 
    if (!url) url = "http://xxx.co.uk/xxx/script.js"; 
    var scripts = document.getElementsByTagName('script'); 
    for (var i = scripts.length; i--;) { 
     if (scripts[i].src == url) return true; 
    } 
    return false; 
} 

como alternativa, puede hacer algo como esto:

<a href="javascript: 
    if (!jsCode) { 
     var jsCode = document.createElement('script'); 
     jsCode.setAttribute('src', 'http://xxx.co.uk/xxx/script.js'); 
     document.body.appendChild(jsCode); 
    } 
">Bookmarklet</a> 

Esto "contamina" el espacio de nombres global con la variable jsCode, pero eso podría ser un mal necesario. Podría cambiarle el nombre a algo que es poco probable que aparezca en el documento donde se ejecuta bookmarklet.

---

Tenga en cuenta que mientras que el esquema URI javascript está bien para bookmarklets como en este caso, no se considera que es una buena práctica para un uso normal.

Answer 2

si se crea una variable en el ámbito mundial (window.yourVariable) y comprobar si lo que existe ya continuación, puede decidir si desea añadir su código jsCode fragmento o correr todo lo que se está ejecutando en script.js

Answer 3

Simplemente compruebe la longitud del selector. Aquí hay un ejemplo usando jQuery:

if ($('script[src="http://xxx.co.uk/xxx/script.js"]').length > 0) { 
    //script exists 
} 

Answer 4

Puede colocar id atributos en sus script etiquetas y utilizar document.getElementById('your-id') para identificar si el guión está en la página antes de añadir.

if (!document.getElementById('your-id')) { 
    // append your script to the document here, ensure it has its id attribute set to 'your-id' 
} 

Answer 5

En caso de trabajar con local y en vivo alternativamente.

La URL exacta puede sufrir modificaciones. Creo que el método de identificación es mejor.

Esta es una combinación de dos respuestas de desbordamiento de pila.

if (!document.getElementById('your-id')) { 
     addScript("your_script_src"); //adding script dynamically 
    } 

    function addScript(path) { 
     var head = document.getElementsByTagName("head")[0]; 
     var s = document.createElement("script"); 
     s.type = "text/javascript"; 
     s.src = path; 
     s.id = "your-id"; 
     head.appendChild(s); 
    } 

function addCSSFile(path) { 
    var head = document.getElementsByTagName("head")[0]; 
    var s = document.createElement("style"); 
    s.type = "text/css"; 
    s.src = path; 
    head.appendChild(s); 
} 

Answer 6

solución con ES6, sin jQuery:

const url = 'http://xxx.co.uk/xxx/script.js'; 

function scriptExists(url) { 
    return document.querySelectorAll(`script[src="${url}"]`).length > 0; 
} 

if(scriptExists(url){ 
    ... 
} 

No se recomienda a inline JS en HTML. En su lugar, agregue detectores de eventos:

function bookmark() { 
    if(scriptExists(url){ 
    ... 
    } 
} 

document.querySelectorAll('a.bookmark').addEventListener('click', 
bookmark, false);