Mafia II

Dynamické nahrávání skriptu

Červen 10th, 2006

Pokud píšete opravdu velkou aplikaci, není vždy ideální vytvářet jediný obrovský JS soubor a nutit klienta, aby ho celý stahoval a vykonával. Nebo chceme skript generovat (např. pomocí php), ale nechceme kvůli jeho obnovení znovu nahrávat celou stránku. Můžeme to vyřešit opět JavaScriptem.

Teorie: Jakmile do stránky vložíme skript, vykoná se. Ale pokud je již stránka načtená, pouhé přidání tagu script do jejího těla nám nepomůže. Aby se skript vykonal, je třeba jej umístit ho hlavičky (head). Dále potřebujeme kontrolovat zda li již nebyl skript jednou nahrán, popřípadě starý smazat a nahrát znovu. To si zajistíme pomocí námi nastaveného ID, které vytvoříme tak aby byla co nejmenší šance že by se opětovně v dokumentu vyskytlo. Poslední věcí kterou by jsme mohli potřebovat je opět se zbavit již nepotřebného skriptu. Není to příliš častý případ, ale uvedu ho zde i tak – pokusíme se najít skript v hlavičce (pomocí ID) a odstraníme ho.

Praxe:

function injectScript(script, reload)
{
   var head = document.getElementsByTagName('head')[0];
   // pokud hlavička neexistuje, ukončíme funkci a vrátíme false
   if (!head) { return false; }

   var old = document.getElementById('autoloadedscript-'+script);
   // ověříme zda-li u  jsme skript nenahráli
   if (old) {
      // pokud ano a nechceme ho přepsat, funkci ukončíme
      if (!reload) { return true; }
      // starý skript odstraníme
      head.removeChild(old);
   }

   // Vytvoříme objekt s novým scriptem
   var newscr = document.createElement('script');
   newscr.id = 'autoloadedscript-'+script;
   newscr.src = script;
   newscr.type = 'text/javascript';
   newscr.language = 'JavaScript';

   // a nakonec ho přidáme do hlavičky a tramtadadá! je hotovo
   head.appendChild(newscr);
   return true;
}

function rejectScript(script)
{
   var head = document.getElementsByTagName('head')[0];
   // pokud hlavička neexistuje, ukončíme funkci a vrátíme false
   if (!head) { return false; }

   var old = document.getElementById('autoloadedscript-'+script);
   // ověříme zda-li u  jsme skript nenahráli
   if (old) {
      // starý skript odstraníme
      head.removeChild(old);
      return true;
   }
   return false;
}

Použití: Postupné injectování skriptů je využitelné zvláště u velkých aplikací, kde nechcete aby klient měl u sebe zbytečně velký skript. Funkci injectScript() zavoláme vždy před voláním funkcí z požadovaného souboru, sama už se postará o vynechání/zno­vunačtení skriptu.

A tady je malá ukázka: Download…

Petr

Posted in JavaScript | del.icio.us | Top Of Page |

Vložty komentář