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

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

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

Ответ 1

Вы можете проверить, загружен ли ваш script следующим образом:

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, но это может быть необходимым злом. Вы можете переименовать его в нечто, что вряд ли появится в документе, в котором запускается букмарклет.

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

Ответ 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);
}

Ответ 6

Решение с ES6, no 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);