Добавьте script в голову, если не существует

Я хочу добавить дополнительные скрипты и стили на мой сайт, когда загружается конкретный div. Я начинаю с определения пути к script или таблице стилей, а затем создаю элемент. В дальнейшем я добавляю элемент в главный тег в HTML.

Но я хотел бы узнать, добавлен ли script или таблица стилей, прежде чем я добавлю его снова. Было бы глупо добавлять уже существующую script или таблицу стилей.

В: Как я могу использовать javascript для проверки, или нет script уже существует в теге head, а затем добавить элемент, если нет?

ИЗМЕНИТЬ

Я создал функцию, основанную на ответе от @KernelPanik. Это пока не работает, но, надеюсь, так и будет. Функция в настоящее время находится под вопросом: моя функция добавления script не работает

Ответы

Ответ 1

Если вы можете использовать jquery, этот код хорош

function appendScript(filepath) {
    if ($('head script[src="' + filepath + '"]').length > 0)
        return;

    var ele = document.createElement('script');
    ele.setAttribute("type", "text/javascript");
    ele.setAttribute("src", filepath);
    $('head').append(ele);
}

function appendStyle(filepath) {
    if ($('head link[href="' + filepath + '"]').length > 0)
        return;

    var ele = document.createElement('link');
    ele.setAttribute("type", "text/css");
    ele.setAttribute("rel", "Stylesheet");
    ele.setAttribute("href", filepath);
    $('head').append(ele);
}

В коде введите

appendScript('/Scripts/myScript.js');
appendStyle('/Content/myStyle.css');

Ответ 2

Вы можете использовать DOM getElementsByTagName("script"), чтобы получить все теги <script> в документе. Затем вы можете проверить URL-адреса src каждого возвращаемого тега script для URL-адреса script (ы), добавленных в раздел главы. Аналогично, вы можете сделать что-то подобное для таблиц стилей, заменив поиск "script" на "стиль".

Например, если URL-адрес script, добавленный в раздел <head>, равен header_url.html

var x = document.getElementsByTagName("script");
var header_already_added = false;

for (var i=0; i< x.length; i++){
    if (x[i].src == "header_url.html"){
        // ... do not add header again
        header_already_added = true;
    }
}

if (header_already_added == false){
    // add header if not already added
}

Аналогично, если URL-адрес стиля, добавленного в раздел <head>, header_style.css

var x = document.getElementsByTagName("style");
var header_already_added = false;

for (var i=0; i< x.length; i++){
    if (x[i].src == "header_style.css"){
        // ... do not add header again
        header_already_added = true;
    }
}

if (header_already_added == false){
    // add header if not already added
}

Здесь также был задан аналогичный вопрос: Проверить, существует ли Javascript script на странице

Ответ 3

var lib = '/public/js/lib.js';

if (!isLoadedScript(lib)) {
  loadScript(lib);
}

// Detect if library loaded
function isLoadedScript(lib) {
  return document.querySelectorAll('[src="' + lib + '"]').length > 0
}

// Load library
function loadScript(lib) {
  var script = document.createElement('script');
  script.setAttribute('src', lib);
  document.getElementsByTagName('head')[0].appendChild(script);
  return script;
}

Ответ 4

Другой способ с помощью вспомогательного элемента, как показано ниже

function isScriptAlreadyPresent(url) {
  var scripts = Array.prototype.slice.call(document.scripts);
  return scripts.some(function(el) {
     return el.src && el.src != undefined && el.src == url;
  });
}

isScriptAlreadyPresent('http://your_script_url.tld/your_lib.js');

Он использует функцию Array.prototype.some. Вам может понадобиться es5-shim, если вы находитесь в браузерах, не поддерживающих ES5 (IE7 и IE8...)

Ответ 5

Я использовал решение Джека Ли. Это было легко реализовать и быстро переделать практически с любым типом файла.... Я не расширился ни на что... Я на самом деле, вероятно, немного ошеломил его... просто хотел перечислить, что я сделал, если это поможет кому-то еще...

var lib_jq = '//pathtofile/jquery.js';
var lib_bs = '//pathtofile/bootstrap.min.3.5.js';
var lib_cs = '//pathtofile.css';

 ///checks files with the SRC attribute
function isLoadedScript(lib) {
    return document.querySelectorAll('[src="' + lib + '"]').length > 0
}
///checks files with the HREF attribute
function isLoadedCss(lib) {
    return document.querySelectorAll('[href="' + lib + '"]').length > 0
}
///loads the script.js files
function loadScript(link) {
   document.write('<scr' + 'ipt type="text/javascript" src="'+link+'"></scr' + 'ipt>');
}

///loads the style.css files
function loadCss(link) {
   document.write('<link rel="stylesheet" href="'+link+'">');
}

 /// run funtion; if no file is listed, then it runs the function to grab the URL listed. ///Run a seperate one for each file you wish to check. 
if (!isLoadedScript(lib_jq)) { loadScript(lib_jq); }
if (!isLoadedScript(lib_bs)) { loadScript(lib_bs); }
if (!isLoadedCss(lib_cs))    { loadCss(lib_cs);    }

I know there is always a "better" and more "elegant" solution, but for us beginiers, we got to get it working before we can start to understand it...

Ответ 6

возможно headjs может помочь вам.

или вы можете добавить атрибут onload в тег script.

мой английский немного беден, поэтому, возможно, я не понимаю ваш вопрос.

if(ie){
  js.onreadystatechange = function(){
    if(js.readyState == 'complete'){
      callback(js);
  }
}
else{  
js.onload = function(){
  callback(js);
}

Ответ 7

Вы можете попробовать вызвать некоторую функцию, объект, переменную из этого js script файла, если он ее найдет, тогда он существует, если нет, вам нужно вставить этот файл js script.