JavaScript nach-/dazuladen
JavaScript, Ajax

Die vorgestellte Technik ermöglicht es, JavaScript-Code nachträglich dem Dokument zuzufügen und ausführbar zu machen. Zusätzliches Einfügen von DOM-Knoten (script-Elemente) ist nicht notwendig.

Vorgehensweise

  1. Mittels Ajax wird ein serverseitiges Script angestossen
  2. Das serverseitige Script stellt den JavaScript-Code als Zeichenkette zur Verfügung
  3. In der callback-Funktion wird der JS-Code mit Hilfe der Methode eval_js ausführbar gemacht.

Beispiel

Nach Betätigen der Schaltfläche wird die aktuellste jQuery-Version geholt und ausführbar gemacht.

Quellcode:

Der nachstehende Quellcode demonstriert die oben beschriebene Vorgehensweise. Im Anschluss findet sich noch der Code zum serverseitigen Script.

JavaScript:
// String-Methode, um JS ausführbar zu machen (Quelle: tutorials.de)
String.prototype.eval_js = function(){
  var objDok = document.createElement("div");

  // IE-Workaround (Falls Rückgabestring mit einem string-Tag beginnt)
  var objDummy = document.createElement("br");
  objDok.appendChild(objDummy);

  // Zeichenkette des String-Objektes in DIV schreiben
  objDok.innerHTML += this;
  var strScript = "";

  // Alle Script-Elemente im DIV durchlaufen
  for(var i=0; i<objDok.getElementsByTagName("script").length; i++){
    // HTML-Code des aktuellen Script-Bereiches in String schreiben
    // Enthält nur den JS-Code ohne Tags
    strScript += objDok.getElementsByTagName("script")[i].innerHTML;
  }

  // Den JS-Quellcode mit eval ausführen
  eval(strScript);
  delete objDok;
}


// Funktion zum Absetzen des Requests, Verarbeiten der JS-Antwort und Testen
function initRequest(){
  var strData = "";

  oXHR = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
  oXHR.open("POST", "js_get_latest_jquery.js.php", true);
  oXHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  oXHR.setRequestHeader("Content-length",strData.length);
  oXHR.setRequestHeader("Connection", "close");
  oXHR.setRequestHeader("If-Modified-Since", "Thu, 01 Jan 1970 00:00:00 GMT");

  oXHR.onreadystatechange = function(){
    if((oXHR.readyState==4) && (oXHR.status==200)){
      // JS ausführbar machen
      ("<"+"script>"+unescape(oXHR.responseText)+"</"+"script>").eval_js();

      // Testfunktion
      // Wurde jQuery erfolgreich geladen, ist der Typ "function"
      alert(typeof jQuery);
    }
  };

  oXHR.send(strData);
}

Als Ergänzung noch das serverseitige Script (PHP):

PHP:
<?php
header("content-type: application/x-javascript");

$strJS = file_get_contents("http://jquery-ui.googlecode.com/svn/tags/latest/jquery-1.4.4.js");
echo(rawurlencode($strJS));
?>
© 2011 Quaese