Max: Problem beim Einbinden externer JS-Dateien

Hallo.
Einige von euch müssten mich und mein Problem mittlerweile zu Genüge kennen, aber ich habe leider immer noch ein kleines Problem. Und ich komme zu euch, weil ihr meiner Ansicht nach das größte/netteste Wissensforum seid - naja, ich bin noch Schüler und muss ja noch viel lernen ;)

Zu meinem Problem:
Ich habe einen Kalender (http://www.mastershrimp.com/kalender/Kalender.html, http://www.mastershrimp.com/kalender/Kalender.js, http://www.mastershrimp.com/kalender/Untertitel.js) mit JS gebastelt. Das Script befindet sich in der Kalender.js - kleine Zusatzvariablen sind in der Untertitel.js.
Das Problem besteht nun darin, dass diese JS-Dateien _immer_ da sein müssen - egal wie oft ich das Dokument reloade. Die Seite muss leider ziemlich oft neu beschrieben werden - genauer gesagt: jedes Mal, wenn man den Monat wechselt.
Bisher habe ich das so gelöst, dass einmal das HTML-Dokument die JS-Dateien einbindet und einmal die Funktion, die bei einem Klick auf einen Monat das Dokument neu beschreibt ( KalenderNew() ). Das hat online ein Problem mit den JS-Dateien hervorgerufen, weil der Browser das irgendwie nicht mag, wenn man 2 Dateien einbindet (so ähnlich habe ich das hier http://forum.de.selfhtml.org/archiv/2003/6/50871/#m278960 verstanden.) - das Resultat war (und ist) eine weiße Seite.
Damals gab es diese Funktion mit den Monaten noch nicht - das Dokument wurde also nur 1x geladen.
Man hat mir damals auch folgendes geraten:

<script ...>
</script>

<frameset rows="100%" onload="KalenderGenerate();">
<frame src="about:blank" name="inhalt">
</frameset>
und in KalenderGenerate musst beschreibst du dann self.inhalt neu. Das klappt sogar in 3'er Browsern ohne Probleme.

Nur muss ich der Funktion KalenderNew() (damals noch KalenderGenerate() ) am Anfang noch den aktuellen Monat übergeben. Habe keine Ahnung, wo ich den Code dafür notieren soll.

Kann mir jemand helfen? Liege ich vielleicht mit der Ursache des Problems völlig falsch?
Wer das Problem mal rekonstruieren will:

  1. Gehe auf den Kalender
  2. Klicke auf irgendeinen Monat -> Das Bild friert sich ein.
  3. Oder öffne ein Bild, schließe es wieder und klicke dann auf einen Monat -> Das Bild friert sich ein.
    So ists im IE6. Andere Browser (Mozilla, Netscape) kommen wahrscheinlich gar nicht auf den Kalender.
    Help! ;)
    Ich komm echt nicht auf die Lösung!

Vielen Dank an alle, die sich durch diesen Roman gewühlt haben und vielen Dank schonmal für jeden Vorschlag!

MfG

Max

  1. Man hat mir damals auch folgendes geraten:

    <script ...>
    </script>

    <frameset rows="100%" onload="KalenderGenerate();">
    <frame src="about:blank" name="inhalt">
    </frameset>

    das kommt mir bekant vor ;-)

    also, du kanst es so machen:
    <script ...>
    var Now = new Date();
    var aktMonat = Now.getMonth();

    function KalenderNew(monat)
    {
    ....
    }

    </script>

    <frameset rows="100%" onload="KalenderNew(aktMonat);">
    <frame src="about:blank" name="inhalt">
    </frameset>

    Struppi.

    1. das kommt mir bekant vor ;-)

      jepp. Das ist deine Lösung ;)

      also, du kanst es so machen:
      <script ...>
      var Now = new Date();
      var aktMonat = Now.getMonth();

      function KalenderNew(monat)
      {
      ....
      }

      </script>

      <frameset rows="100%" onload="KalenderNew(aktMonat);">
      <frame src="about:blank" name="inhalt">
      </frameset>

      Um das ganze zu konkretisieren:

      In die HTML-Datei:

      <script type="text/javascript" src="Untertitel.js"></script>
      <script type="text/javascript" src="Kalender.js">
       <!--
       var Now = new Date();
       var aktMonat = Now.getMonth();
       function KalenderNew()
       {
       self.inhalt.document.close();
       self.inhalt.document.open('text/html');
       KalenderGenerate(aktMonat);
       }
      //-->
      </script>

      <frameset rows="100%" onload="KalenderNew(aktMonat);">
      <frame src="about:blank" name="inhalt">
      </frameset>

      Und in der JS-Datei jedes "document.write" in ein "self.inhalt.document.write" ändern?

      Müsste dann das Problem behoben sein? Ich habe da so meine Zweifel....Ich probiers mal.
      Danke!

      1. Müsste dann das Problem behoben sein? Ich habe da so meine Zweifel....Ich probiers mal.
        Danke!

        Habs gerade gemacht. Klappt nicht. Irgendwie bin ich zu blöd für deine Lösung :(
        Würde es dir was ausmachen, das ganze Idioten-gerecht zu erklären? Ich hatte eigentlich gedacht, dass ich so etwas leicht verstehen könnte...so kann man sich irren ;)

        Um es dir zu erleichern, hier der Ablauf, der beim Start der Kalender.html passieren soll:

        1. Das (Frame-)Dokument wird mit einer Tabelle und etwas drumherum neu beschrieben.
        2. Dabei sollen die "<script src="...">"-Sachen im Hintergrund aktiv bleiben - sprich, nicht mitgelöscht werden.

        Wenn man nun auf einen Link klickt, soll das Dokument mit einer neuen Tabelle beschrieben werden. Nach wie vor sollten aber die JS-Datei-Verlinkungen nicht gelöscht werden.

        Ist sowas möglich? Mit der obenstehenden Lösung?

        Gruß

        Max

        1. Hallo.
          Habe mittlerweile echt alles mögliche ausprobiert - ich komm einfach nicht drauf! Immer werden die Verlinkungen zu den JS-Dateien gelöscht! Ich bin am verzweifeln. Hoffentlich habe ich jetzt mit all dem Zeug hier nicht gegen die Forums-Regeln verstoßen. Wenn doch, tut es mir furchtbar leid, aber ich komm halt einfach nicht auf eine plausible Lösung...

          Ein Königreich für eine Lösung!

          Gruß

          Max

      2. Um das ganze zu konkretisieren:

        In die HTML-Datei:

        <script type="text/javascript" src="Untertitel.js"></script>
        <script type="text/javascript" src="Kalender.js">
        <!--
        var Now = new Date();
        var aktMonat = Now.getMonth();
        function KalenderNew()
        {
        self.inhalt.document.close();
        self.inhalt.document.open('text/html');
        KalenderGenerate(aktMonat);

        ein self.inhalt.document.close() vielleicht (wenn's nicht in der Funktion ist.)

        besser weil vieil leichter wartbar und flexibler ist es, wenn diene Funktion KalenderGenerate nur den HTML code zurückgeben würde.

        Also z.b. so ähnlich:

        function KalenderGenerate (m)
        {
        var html = '<body>';

        html += 'bla'

        • 'und bla'
        • 'und noch mehr bla'
          ;

        html += '</body>';
        return html;
        }

        und du dann einfach hier an der Stelle die Seite auf einem Streich generierst:

        function KalenderNew()
        {
        self.inhalt.document.open('text/html');
        self.inhalt.document.write( KalenderGenerate(aktMonat));
        self.inhalt.document.close();

        }

        fertig.

        Hoffe das hilft.

        Ein problem kann noch sein, dass du ja links gernerierst, die müssen jetzt auf parent.funktionsName zeigen.

        Struppi.

        1. Guten Morgen!
          Hmm. Ich habe noch 2 Fragen zu deiner Lösung:

          1. dieses "+'bla'" soll ich da die jetzige Funktion reinpacken? Alles? Variablen, if()..., switch(), einfach alles? Also vor jede Zeile einfach ein "+'" und am Ende ein "'" ?

          2. Ok, ich verstehe sehr viel weniger von der Materie als du, aber wenn der die Funktion KalenderGenerate() aufruft, werden dann nicht schon wieder alle bestehenden "<script src="...">" überschrieben? Sind also dann weg? Das wäre dann ja wieder genau mein Problem.

          Ich probiers folgendermaßen jetzt mal aus:

          1. In der KalenderGenerate() schreibe ich vor jede Zeile +' und das bisschen Code davor und dahinter (s.o.)
          2. In die HTML-Datei schreibe ich dein Frameset mit onLoad="KalenderNew()".
          3. alle document.write() werden durch self.inhalt.document.write() ersetzt.

          Habe ich alles richtig verstanden?

          Was war dieses Problem mit den Links? Wie muss ich die ändern? "target="parent.KalenderNew()" ??

          Danke schonmal

          MfG

          Max

        2. Hoffe das hilft.

          Leider, leider nicht. Wahrscheinlich bin ich irgendwie zu blöd dafür :( Naja, ich werde selbst mal ein paar Sachen noch ausprobieren und ansonsten das Ding in die Tonne kloppen. Schade eigentlich, da dieses Problem mit den fluchJS-Dateien ja eigentlich ein sehr einfaches Problem war - im Vergleich zu den vorherigen JS-Problemen.

          Hier nochmal mein Code, damit du sehen kannst, ob (oder besser "dass") ich was falsch gemacht habe. Vielen Dank trotzdem für deine Bemühungen.

          var html = '<body>'; html +='/* BITTE NUR HIER VERAENDERUNGEN VORNEHMEN /'  +'var Endung = ".jpg";                             //Endung der Bilddateien (ausser Standart-Bild)'  +'var PicStd = "standart.gif"                      //Dateiname + Endung vom Standartbild'  +'var Zeilenumbruch = 5;                           //Zeilenumbruch.Hier: alle 5 Bilder ein Zeilenumbruch in Tabelle.'  +'var ThumbExt = "thumb";                          // Dateinamenerweiterung fuer Thumbnails. Bsp: thumbBild1.jpg '  +'var UntertError = "(kein Bild vorhanden)";       //Ersatz-Bilduntertitel, wenn kein Bilduntertitel eingetragen wurde'  +'var BilderError = "Leider kein Bild vorhanden";  //Text der Fehlermeldung, wenn ein nicht vorhandenes Bild angeklickt wird'  +'var AlleBilder = new Array('01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31');'                                                     // Oben: Beizeichnung aller Bilder in einem Ordner. Bei Aenderung muessen auch die Thumbs umbenannt werden!' +'/ AB HIER BITTE KEINE VERAENDERUNGEN MEHR VORNEHMEN */'

          +'/* Funktion um Bilder aufzurufen*/' +'function BildAufruf(BildName, aktMonat)'  +'{'  +'var Monat = aktMonat;'  +'var Monate = new Array('Januar','Februar','Maerz','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember');'  +'var MonatName = Monate[Monat];'  +'var Pfad = Monate[aktMonat] + '/' + BildName + Endung;'

          +'window.open(Pfad,'Bildgross','toolbar=no,status=no,menubar=no,resizable=yes');'  +'}'

          +'/Funktion um Kalender aufzurufen/' +'function KalenderGenerate(aktMonat)'  +'{'   +'var h = Zeilenumbruch-1; '   +'var i = 0;'   +'var j = h;'   +'var p = 0;'   +'var Jetzt = new Date();'   +'var Monat = aktMonat;'   +'var ControlMonat = Jetzt.getMonth();'   +'var Monate = new Array('Januar','Februar','Maerz','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember');'   +'var MonatsArray = new Array(31,28,31,30,31,30,31,31,30,31,30,31);'   +'var MonatName = Monate[Monat];'   +'var Tag = Jetzt.getDate();'   +'var UntertitelArray = new Array(UntertitelJanuar[i],UntertitelFebruar[i],UntertitelMaerz[i],UntertitelApril[i],UntertitelMai[i],UntertitelJuni[i],UntertitelJuli[i],UntertitelAugust[i],UntertitelSeptember[i],UntertitelOktober[i],UntertitelNovember[i],UntertitelDezember[i]);'

          +'document.write('<link rel="stylesheet" type="text/css" href="Kalender.css"> ');'   +'document.write('<h3>Pic-of-the-day &Uuml;bersicht des Monats ' + MonatName + '</h3>');'   +'document.write('Zum Vergrößern einfach auf das Bild klicken!');'   +'document.write('<table border=1 width=70% cellspacing=10 cellpadding=10><tr>');'

          +'/Schleife fuer Bilder/'   +'var UntertitelArray = new Array(UntertitelJanuar,UntertitelFebruar,UntertitelMaerz,UntertitelApril,UntertitelMai,UntertitelJuni,UntertitelJuli,UntertitelAugust,UntertitelSeptember,UntertitelOktober,UntertitelNovember,UntertitelDezember);'   +'var BildFehler = 0;'

          +'while (i < MonatsArray[Monat])'   +'{'   +'var Datum = i+1 + "." + eval(1*Monat+1) + ".";'

          +'if(i==Tag-1 && Monat==ControlMonat)'     +'{'     +'if(UntertitelArray[Monat][i] == undefined || UntertitelArray[Monat][i] == " " || UntertitelArray[Monat][i] == "")'     +' {'     +' document.write('<td class="heute"><a href="#" onClick="alert(BilderError); return false;"><img onError="this.src=\'' + PicStd + '\'" title="' + UntertError + '" border="0" src="' + MonatName  + '/' + ThumbExt + AlleBilder[i] + Endung + '"></a><br><div class="datum">' + Datum + ' (HEUTE)</div><div class="untertitel"> ' + UntertError + '</div></td>');'     +' BildFehler++;'     +' }'     +'else'     +' { document.write('<td class="heute"><a href="#" onClick="BildAufruf(\'' + AlleBilder[i] + '\',' + aktMonat + '); return false"><img onError="this.src=\'' + PicStd + '\'" title="bla' + UntertitelArray[Monat][i] + '" border="0" src="' + MonatName  + '/' + ThumbExt + AlleBilder[i] + Endung + '"></a><br><div class="datum">' + Datum + ' (HEUTE)</div><div class="untertitel"> ' + UntertitelArray[Monat][i] + '</div></td>'); }'     +'}'   +'else'   +' {'   +'  if(UntertitelArray[Monat][i] == undefined || UntertitelArray[Monat][i] == " " || UntertitelArray[Monat][i] == "")'   +'   {'   +'    document.write('<td><a href="#" onClick="alert(BilderError); return false"><img onError="this.src=\'' + PicStd + '\'" title="' + UntertError + '" border="0" src="' + MonatName + '/' + ThumbExt + AlleBilder[i] + Endung + '"></a><br><div class="datum">' + Datum + '</div><div class="untertitel"> ' + UntertError + '</div></td>');'   +'    BildFehler++;'   +'   }'   +'  else'   +'   { document.write('<td><a href="#" onClick="BildAufruf(\'' + AlleBilder[i] + '\',' + aktMonat + '); return false"><img onError="this.src=\'' + PicStd + '\'" title="' + UntertitelArray[Monat][i] + '" border="0" src="' + MonatName + '/' + ThumbExt + AlleBilder[i] + Endung + '"></a><br><div class="datum">' + Datum + '</div><div class="untertitel"> ' + UntertitelArray[Monat][i] + '</div></td>'); }'   +' }'

          +'if(i==h)'   +' {'   +'  document.write('<tr>')'   +'  h = h+j+1;'   +'  }'   +'i++;'   +'p++;'   +'}' +'document.write('</table>');'

          +'/Monats-Navigation/'   +'document.write('<table class="navleiste">');'   +'var k = 0;'

          +'while(k<12)'   +' {'   +'  switch(k) '   +'  {'   +'   case ControlMonat:'   +'   document.write('<td><a href="#" onClick="KalenderNew(\'' + k + '\'); return false"><b>' + Monate[k] + '</b></a> |</td>');'   +'   break;'   +'   +'   case 11:'   +'   document.write('<td><a href="#" onClick="KalenderNew(\'' + k + '\'); return false">' + Monate[k] + '</a></td>');'   +'   break;'   +'   +'   default:'   +'   document.write('<td><a href="#" onClick="KalenderNew(\'' + k + '\'); return false">' + Monate[k] + '</a> |</td>');'   +'   break;'   +'  }'   +' k++;'   +' }'   +'document.write('</table>');'   +'document.write('(Fett = aktueller Monat)')'

          +'/DETAILS/'   +'document.write('<div class="details"><tt><br>Anzahl Bilder des Monats ' + MonatName + ':<b>' + eval(MonatsArray[Monat]-BildFehler) + ' Bilder.</b>');'   +'document.write('<br>Aktueller Tag:<b> ' + Tag + '.' + eval(1*ControlMonat+1) + '.</b>');'   +'document.write('<br>Angezeigter Monat:<b> ' + MonatName + '</b>');'   +'document.write('<br>Springe zu aktuellem Monat: <a href="#" onClick="KalenderNew(' + ControlMonat + '); return false"><b>' + Monate[ControlMonat] + '</a></b><hr width="20%"></div>');'   +'document.write('<br><div class="makingof">Kalenderversion: 1.68 made by Max B.');'   +'document.write('<br>Letzte Aenderung (HTML-Datei): ' + document.lastModified + '</div></tt>');' +'}' return html;

          +'function KalenderNew(aktMonat)' +'{' +'document.close();' +'document.open('text/html');' +'document.write('<script src="Untertitel.js" type="text/javascript"></script>');' +'document.write('<script src="Kalender.js" type="text/javascript"></script>');' +'KalenderGenerate(aktMonat);' +'}' return html;

          function KalenderNew() { self.inhalt.document.open('text/html'); self.inhalt.document.write( KalenderGenerate(aktMonat)); self.inhalt.document.close(); }

          ////////////HTML DATEI////////////

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Kalender</TITLE>

          <script src="Kalender.js" type="text/javascript"></script> <script src="Untertitel.js" type="text/javascript"></script>

          <frameset rows="100%" onload="KalenderNew();"> <frame src="about:blank" name="inhalt"> </frameset>

          </HEAD>

          <BODY BGCOLOR="#BBBBBB" TEXT="#000000" LINK="#000000" VLINK="#000000" ALINK="#000000">

          <noscript> Lieber User. Damit dein Browser diesen Kalender anzeigen kann, benoetigt er Javascript. Die meisten modernen Browser unterstuetzen JavaScript. Es kann allerdings sein, dass du (oder irgendwer anders) Javascript aus Sicherheitsgruenden deaktiviert haben. Wenn du den Kalender sehen moechtest, musst du allerdings Javascript aktivieren. Klicke dich dazu mal durch die Optionen deines Browsers! Danke! </noscript> </BODY> </HTML>

          Adiö!

          1. nein, du sollst nicht den Javascript code zurückgeben, sondern nur den HTML Code. Und du musst keine Anführungszeichen escapen.

            +'   document.write('<td><a href="#" onClick="KalenderNew(\'' + k + '\'); return false">' + Monate[k] + '</a></td>');'

            hier musst du parent.KalenderNew(...) aufrufen.

            Struppi.

  2. Tja. Wie man an der Überschrift erkennen kann, gebe ich's auf.

    Aber es _kann_ doch nicht sein, dass man keine externen JS-Dateien einbinden kann, wenn man ein Dokument dynamisch beschreibt ?!?! Sowas macht man doch sehr oft mit JS!

    Wenn jemandem noch etwas einfällt, würde ich mich freuen, wenn er sich bei mir melden würde!

    Vielen Dank!

    Gruß

    Max

    P.S.: Wie ich mich so kenne, wird mir das Problem keine Ruhe lassen - ich werde wahrscheinlich zum Leid aller hier Anwesenden irgendwann noch einen Thread dazu erstellen ;) - vielleicht weiß jemand noch etwas.

  3. Ich hoffe, dass das überhaupt noch jemand liest.
    Also, ich habe herausgefunden, dass der Fehler im IE6 nur dann auftritt, wenn man vorher ein Bild verändert hat. Danach hängt sich der Browser beim Klick auf einen anderen Monat auf.

    Vielleicht kann damit jemand etwas anfangen.

    Gruß

    Max