molily: Seite per Javascript laden - Javascript ausführen

Beitrag lesen

Hallo,

Ich nehme einmal an, du weist den Inhalt mit innerHTML oder so zu.

Die Scripte werden dabei nicht ausgeführt, das musst du manuell machen, indem du im hinzugefügten Teilbaum alle script-Elemente suchst (document.getElementByTagName('script')), den Inhalt ausliest (text- oder textContent-Eigenschaft) und eval auf dem Inhalt aufrufst.

Diese Scripte können natürlich nicht window.onload = function() {}; oder gleichwertiges enthalten, denn der Code im Handler würde nicht sofort ausgeführt.

Du brauchst also eine Weiche »wenn das Dokument bereits geladen ist, führe den Code sofort aus, ansonsten beim document ready«. Erst dann kann der Code separat und eingebettet ausgeführt werden.

Beispiel:

var onDomReady = (function() {  
  var EVENT_TYPE = 'DOMContentLoaded';  
  // Speichert, ob DOMContentLoaded schon passiert ist  
  var loaded = false;  
  document.addEventListener(EVENT_TYPE, function() {  
    loaded = true;  
  });  
  return function(handler) {  
    if (loaded) {  
      handler();  
    } else {  
      document.addEventListener(EVENT_TYPE, handler);  
    }  
  };  
})();

Dann kannst du überall Code so einbinden:

<script>  
onDomReady(function() {});  
</script>

Dieser Code kann problemlos mit eval() ausgeführt werden.

Das macht jQuerys $(document).ready() übrigens automatisch. jQuery führt auch automatisch alle Scripte aus, wenn du HTML mit $().html() ins DOM schreibst (was nicht ganz unproblematisch ist, weil es schnell zu XSS führt). Ich würde stark raten, solche Operationen mit jQuery durchzuführen.

Hintergrund:
http://molily.de/js/event-handling-onload.html
http://api.jquery.com/ready/
http://api.jquery.com/html/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
http://api.jquery.com/jQuery.globalEval/
http://perfectionkills.com/global-eval-what-are-the-options/

Mathias