tylko dodać skrypt do głowy, jeśli nie istnieje

Chcę dodać dodatkowe skrypty i style do mojej witryny po załadowaniu określonego div. Zacznę od zdefiniowania ścieżki do skryptu lub arkusza stylów, a następnie utworzyć element. Odtąd dołączam element do tagu head w HTML.tylko dodać skrypt do głowy, jeśli nie istnieje

Chciałbym jednak zobaczyć, czy skrypt lub arkusz stylów został już dołączony, zanim ponownie go dołączę. Byłoby głupio dołączyć do istniejącego już skryptu lub arkusza stylów.

P: Jak korzystać z javascript do sprawdzania, czy plik skryptu już istnieje w tagu head, a następnie do elementu, jeśli nie?

EDIT

Zrobiłem funkcję opartą na odpowiedź od @KernelPanik. To jeszcze nie działa, ale mam nadzieję, że tak będzie. Funkcja jest obecnie przedmiotem pytania: my script appending function doesn't work

Źródło

2013-04-13 Dimser

Możesz umieścić identyfikator na swoim znaczniku script/style/link i sprawdzić, czy istnieje. – Vatev

@Vatev Jedynym problemem jest to, że jest obsługiwany tylko przez niektóre przeglądarki. – Dimser

Jak to zrobić? document.scripts lub document.getElementsByTagName ("script") i ich atrybuty są afaik obsługiwane przez wszystkie przeglądarki – mplungjan

może headjs może ci pomóc.

lub możesz dodać atrybut onload w tagu skryptu.

Mój angielski jest trochę ubogi, więc może źle zrozumiałem twoje pytanie.

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

Źródło

2013-04-13 12:27:46 Fakefish

Problem nie polega na dodawaniu skryptów ... jest wykrywanie ich istniejących, a następnie dołączanie skryptów, jeśli jeszcze nie istnieją. – Dimser

jak js.onload = function() {alert ('loaded');} – Fakefish

Można użyć DOM getElementsByTagName("script") aby uzyskać wszystkie <script> znaczników w dokumencie. Następnie możesz sprawdzić adresy URL każdego zwróconego znacznika skryptu dla adresu URL skryptu (ów) dodanego do sekcji head. Podobnie możesz zrobić coś podobnego do arkuszy stylów, zastępując wyszukiwanie "script" przez "style".

Na przykład, jeżeli adres do skryptu przyłączonej do części <head> jest 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 
}

Podobnie, jeśli adres URL stylu przyłączonej do części <head> jest 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 
}

podobne pytanie było również zadawane tutaj: Check if Javascript script exists on page

Źródło

2013-04-13 12:32:17 KernelPanik

Jeśli możesz użyć jquery, th Jest kod jest dobry

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

W swojej napisać kod

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

Źródło

2014-01-14 08:17:50

nie trzeba już używać atrybutu "text/javascript" w HTML5 – Serge

Lovely! Co jeśli deweloper musi sam dodać jQuery? Czy nie byłoby tutaj optymalnym rozwiązaniem dla wanilii javascript? –

-3

Można spróbować wywołanie jakiejś funkcji, obiektu, zmienna tym js plik skryptu, jeśli uzna to wtedy istnieje, czy nie, trzeba wstawić ten plik skryptu js.

Źródło

2014-07-31 14:07:44 BobG8

Innym sposobem z funkcji pomocnika jak poniżej

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');

Wykorzystuje Array.prototype.some funkcję. Możesz potrzebować es5-shim jeśli są w przeglądarkach nie obsługujących ES5 (IE7 i IE8 ...)

Źródło

2014-10-17 02:12:57

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

Źródło

2016-01-12 08:53:00

użyłem rozwiązanie Jack Lee.Łatwo go było zaimplementować i szybko się zmieściło z prawie każdym plikiem typu .... Nie rozszerzałem się na nic ... Właściwie to pewnie go oszołomiłem ... chciałem tylko wymienić to, co zrobiłem, gdyby pomógł komuś else ...

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

Źródło

2016-05-14 05:07:51

tylko dodać skrypt do głowy, jeśli nie istnieje

Odpowiedz

Powiązane problemy