Проверьте, существует ли скрипт Javascript на странице

Question

У меня есть букмарклет, который я создал, и он загружает скрипт с моего сервера на текущую страницу пользователей. Однако у меня есть проверка if в моем скрипте, что если условие не выполняется, никаких действий не предпринимается. Однако, если пользователь затем удовлетворяет этому условию, тогда код запускается, но он вызвал наличие двух наборов скриптов, вставленных на их страницу. Могу я предотвратить это?

<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

вы можете проверить, загружен ли ваш скрипт так:

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; 
} 

в качестве альтернативы, вы можете сделать что-то вроде этого:

<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> 

Это «загрязняет» глобальное пространство имен переменной jsCode, но это может быть необходимым злом. Вы можете переименовать его в нечто, что вряд ли появится в документе, в котором запускается букмарклет.

---

Пожалуйста, обратите внимание, что в то время как схема javascript URI хорошо для букмарклетов как в данном случае, это не считается хорошей практикой для нормального использования.

Answer 2

если вы создаете переменную в глобальной области (window.yourVariable) и проверьте, что уже существует, то вы можете решить, если вы хотите добавить код jsCode сниппета или запустить все, что вы работаете в script.js

Answer 3

Просто проверьте длину селектора. Вот пример использования JQuery:

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

Answer 4

Вы можете разместить id атрибуты ваших script тегов и использовать document.getElementById('your-id'), чтобы определить, является ли скрипт на странице перед добавлением.

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

Answer 5

В случае работы с местными и живыми в качестве альтернативы.

Точный URL-адрес может измениться. Я думаю, что метод ID лучше.

Это комбинация ответов на два переполнения стека.

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

Решение с ES6, не JQuery:

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

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

if(scriptExists(url){ 
    ... 
} 

Это не рекомендуется встраивать JS в HTML. Вместо этого добавьте прослушиватели событий:

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

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