mathefritz: DOMContentLoaded eingetreten aber nötiges fehlt immer noch

Ich hab' mal was "verrücktes" versucht, und lokal klappt es auch, leider nicht aber auf meinem lima-city.de Webspace. Hier mal die entscheidenden Teile des <head>

:
:
  <head id="head">
    <base href="http://matheplanet.com/matheplanet/nuke/html/latexrender/pictures/">
:
:
      <script>
       innerBASE = document.URL;
       innerBASE = innerBASE.slice(0,innerBASE.lastIndexOf('/')+1);
console.log(innerBASE);      
       function initSRCs(wo,was,Datei){
       
            var s = document.createElement(was);
            s.src = innerBASE+Datei;
            return  document.getElementById(wo).appendChild(s);
       }
       initSRCs('head','script',"Arrays2.js");
       initSRCs('head','script',"HilfsFunktionen.js");
     </script>
  </head>
:
<!-- und einwenig body -->

 <script> initSRCs('Skizze','img',"Skizze.png").style="float:left;margin-right:1em";
:
</script>

Dann folgt eine Menge html ohne Script's , und schließlich

<script>
/*       INITIALISIERUNGEN
*/
const  Hilfen = document.getElementById('Hilfen'),
    HauptHint = document.getElementById('HauptHint'),
        EqLns = document.getElementById('EqLns');

document.addEventListener('DOMContentLoaded',INITIALISIERUNGEN);

function INITIALISIERUNGEN(){

/* text neben Skizze */
mixWr(document.getElementById('BildA'  ),mSms,[,mSA]);
mixWr(document.getElementById('Bildabc'),mSms,[,mSa],[",",mSb],[",",mSc]);
:
:
}
</script>

aber mixWr, das in Datei "HilfsFunktionen.js" enhtalten ist, ist unbekannt. Oben, die Einfügung des Bildes "Skizze.png" klappt.

Die URL zu href in "<base ..." ist für die über 50 dazu relativen Dateinamen bestimmt die in "Arrays2.js" in globalen Konstanten mSms und MatBoxs notiert sind
( jeder der über 50 Namen ist 35 Zeichen lang; darauf habe ich keinen Einfluß).
Daher
die Konstruktion mit "innerBASE" die gewährleisten soll, daß das "Paket" aus html-Datei und Javescript-Dateien, die alle im selben Ordner liegen, nicht geändert werden muß wenn es in einen anderen Ordner kommt. Das Ganze ist noch lange nicht fertig, es werden noch einige ".js" dazukommen, damit einzele nicht zu groß werden. der "colsole.log" soll natürlich nicht bleiben.

  1. Erste und grundlegende Frage: Was sagt der Netzwerk-Trace des Browsers. Wird HilfsFunktionen.js fehlerfrei angefordert und empfangen? Oder baust Du ggf. die URL für das .js falsch zusammen?

    Gruß Rolf

    1. Danke Rolf;

      meinst Du Extras -> Webentwickler -> Netztwerkanalyse ?

      da bekomme ich alles, praktisch immer "aus dem Cache"; als Fehlermeldung kann ich nichts erkennen.Alternativ-Text

  2. Hallo,

    Ich hab' mal was "verrücktes" versucht, und lokal klappt es auch, leider nicht aber auf meinem lima-city.de Webspace.

    das hört sich nach einer Timing-Geschichte an.

    :
    :
      <head id="head">
        <base href="http://matheplanet.com/matheplanet/nuke/html/latexrender/pictures/">
    :
    :
          <script>
           innerBASE = document.URL;
           innerBASE = innerBASE.slice(0,innerBASE.lastIndexOf('/')+1);
    console.log(innerBASE);      
           function initSRCs(wo,was,Datei){
           
                var s = document.createElement(was);
                s.src = innerBASE+Datei;
                return  document.getElementById(wo).appendChild(s);
           }
           initSRCs('head','script',"Arrays2.js");
           initSRCs('head','script',"HilfsFunktionen.js");
         </script>
      </head>
    :
    <!-- und einwenig body -->
    
     <script> initSRCs('Skizze','img',"Skizze.png").style="float:left;margin-right:1em";
    :
    </script>
    

    Dann folgt eine Menge html ohne Script's , und schließlich

    <script>
    /*       INITIALISIERUNGEN
    */
    const  Hilfen = document.getElementById('Hilfen'),
        HauptHint = document.getElementById('HauptHint'),
            EqLns = document.getElementById('EqLns');
    
    document.addEventListener('DOMContentLoaded',INITIALISIERUNGEN);
    
    function INITIALISIERUNGEN(){
    
    /* text neben Skizze */
    mixWr(document.getElementById('BildA'  ),mSms,[,mSA]);
    mixWr(document.getElementById('Bildabc'),mSms,[,mSa],[",",mSb],[",",mSc]);
    :
    :
    }
    </script>
    

    aber mixWr, das in Datei "HilfsFunktionen.js" enhtalten ist, ist unbekannt.

    Ja, das hätte ich erwartet. In deinem Initialisierungsscript im head-Element fügst du zwar zwei weitere script-Elemente ein, die darin referenzierte Javascript-Ressource wird aber erst verzögert geladen - mindestens mal um die durch Netzwerk und Server verursachte Totzeit.

    Das Event DOMContentLoaded heißt ja nur, dass das DOM aus dem ursprünglich geladenen Dokument fertig aufgebaut ist. Eventuelle dynamisch ausgelöste Ergänzungen sind damit noch nicht berücksichtigt.

    Oben, die Einfügung des Bildes "Skizze.png" klappt.

    Klar. Das andere (das Einfügen der script-Elemente) klappt auch. Nur eben mit Verzögerung. Wenn du dir die Zeitabläufe mal in der Netzwerkansicht der Developer-Tools anschaust, wirst du vermutlich sehen, dass auch das Bild verzögert geladen wird. Aber das DOM-Objekt, auf das du mit Javascript zugreifst, ist sofort nach der Erzeugung da, auch wenn die Bilddaten erst etwas später nachgekleckert kommen. Ebenso sind auch die nachträglich erzeugten script-Elemente "sofort da", sie haben nur noch keinen Inhalt.

    So long,
     Martin

    --
    Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
    - Douglas Adams, The Hitchhiker's Guide To The Galaxy
    1. Danke Martin;

      eine mir verstänliche Lösung wäre also in nicht zu langen Zeitinverallen abzufragen ob ein bestimmte globale Variable nicht mehr "undefined" ist und dann weiter zu machen. Am einfachsten natürlich unelegant, wäre, einen "intelligenten" Hinweis mit alert auszugeben Gruß F.

  3. Hallo,

    die Scripte werden asyncron nachgeladen, aber <script> kennt das Load-Event, über das eine Callback-Funktion aufgerufen werden kann. Hier mal „mein“ Scriptnachlader:

    LoadScript = function(url,callback) {
      var scr = document.createElement('script');
      scr.type = "text/javascript";
      scr.async = "async";
      if(typeof(callback)=="function") {
        scr.onloadDone = false;
        scr.onload = function() { 
          if ( !scr.onloadDone ) {
            scr.onloadDone = true;
            callback(); 
          }
        };
        scr.onreadystatechange = function() { 
          if ( ( "loaded" === scr.readyState || "complete" === scr.readyState ) && !scr.onloadDone ) {
            scr.onloadDone = true;
            callback();
          }
        }
      }
      scr.onerror = function() {
        console.log(url + " konnte nicht geladen werden.";
      }
      scr.src = url;
      document.getElementsByTagName('head')[0].appendChild(scr);
    } // LoadScript
    

    Ob das „onreadystatechange“ noch nötig ist, habe ich noch nicht geprüft.

    Ich habe hier explizit scr.async = "async"; gesetzt, um sicher zu sein, das asyncron geladen wird. Ohne war das Verhalten bei meinen Tests vor mehreren Jahren browserabhängig.

    Gruß
    Jürgen

    1. Danke Jürgen
      für Deine Große Mühe - aber sorry, auf diesem "Level" bin ich noch nicht.
      Gruß F.