JavaScript Anker ansprechen mit dynamischen Werten

Naranya · 28. Februar 2014

Hallo!

Ich bin Javascript Neuling und kenne mich nur bisschen mit php und html aus.

Ich versuche so ausführlich wie möglch zu schreiben wo genau das Problem liegt, könnte dadurch eine etwas längere Erklärung werden.

Es geht darum das ich ein "Fahrplanvorbetprogramm" schreiben will. Ich will eine Website gestalten die sich automatisch Aktualisiert und einen eindeutigen Wert aus einer Uhrzeit berechnet und dann per Anker zu diesem Wert springt. Ich bin mittlerweile so weit, das ich eine Uhr habe die in einem iframe angezeigt wird. darunter noch ein iframe wo die Daten mit eindeutigen Ankern versehen sind. Ich kann auch schon einen Wert aus der Uhr errechnen und diesen auch automatisch aktualisieren lassen.

Mir fehlt jetzt nur noch wie ich die Variable aus der uhr3.html in die dienst_a23.html übernehmen kann, damit ich mit diesem Wert den Anker ansprechen kann. Die Uhrzeit ist natürlich dynamisch (errechnet sich alle Sekunde neu), der Anker aber mit einem eindeutigen Wert versehen. Weiters weis ich nicht ganz genau wie ich den Anker anwenden soll.

Es sollte dann am Ende so sein, das der untere Frame nach ca. 10 sekunden aktualisiert und dann so weit nach oben Scrollt das die aktuelle Zeile als erstes steht. Er soll alle 10 sekunden überprüfen ob er einen Anker mit diesen Wert hat und soll dorthin springen/scrollen. Hat er nichts, soll er einfach stehen bleiben wo er ist.

Wie ist das am einfachsten zu Lösen? mit einer "if schleife"
Das ganze soll daweil nur lokal am PC laufen ohne viel Webserver aufsetzen zu müssen.

Hier mal die Frames:

Code:

<body>
<iframe src="Uhr3.html" width="100%" height="50" name="Laufendeuhr">
  
</iframe>


<iframe id="dienstanzeige" width="100%" height="400" onload="setTimeout(function(){document.getElementById('dienstanzeige').src = document.getElementById('dienstanzeige').src;}, 5000);" name="Dienst23"  src="Dienst_A23.htm" >>
  
</iframe>

</body>

Hier ein ausschnitt aus den definierten Ankern:

Code:

<a name="106680"> 05:38.00  </a><br>
<a name="106740"> 05:39.00 </a><br>
<a name="106830"> 05:40.30 </a><br>
<a name="106890"> 05:41.30</a><br>
<a name="106950"> 05:42.30 </a><br>
<a name="107010"> 05:43.30 </a><br>
<a name="107190"> 05:46.30  </a><br>

Ich will nicht das mich jemand verurteilt und denkt ich will eine vorgefertigte Lösung. Ich brauche einen kleinen Stubs oder Anregung wie ich das am geschicktesten Lösen könnte. Ich stehe nämlich im Moment total an.

Danke für eure Hilfe!

Liebe Grüße
Naranya

Daaron · 28. Februar 2014

Finger weg von Frames/iFrames. Bei denen irgend etwas gezielt anzusprechen kann zum Hürdenlauf werden. Arbeite lieber mit AJAX, aber achte auf die Same Origin Policy.

benneq · 28. Februar 2014

Zu allererst solltest du gar keine iFrames benutzen, das ist so 1990er-mäßig ;-) Und aktuelle Browser dürften ziemlich gut verhindern, dass du von einer Webseite auf die Variablen einer anderen Website (jeweils in iframes) zugreifen kannst. Also vergiss das Vorhaben ganz schnell wieder.

Statt iframes gestaltest du deine Seite einfach ganz simpel mit div-Elementen, deren Inhalt du dann mittels JavaScript austauschst. Dann hast du alle Daten zusammen in einer Webseite und kannst auch bequem auf alles zugreifen.

Also für deinen Timer-iframe erstellst du einfach ein div mit id="dienstanzeige" und dann kannst du dein "onload=..." in den body der Webseite klatschen. Ist zwar nicht die feine englische Art, aber es sollte funktionieren.

EDIT: ouhh ouuh ouuuhhh, wie ich gerade sehe, ruft dein iFrame eine Webseite alle 5 Sekunden neu auf? Das geht dann natürlich nicht so einfach. Google mal nach "JavaScript Clock" oder sowas, da wird es genug Beispiele geben, wie man eine laufende Uhr mit JS darstellt.

Naranya · 28. Februar 2014

Hallo!

Ich habe aus dem Internet eine Uhr herausgesuch. Die hat, bis auf die werte übergabe nichts mit dem dienstplan zu tun.

Das ist die Uhr, hat noch eine eigene datei mit dhtml.js damit sie läuft:

Code:

<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
   var Start = Jetzt.getTime();

function ZeitAnzeigen () {
  var Jetzt = new Date();
  var Stunden = Jetzt.getHours();
  var Minuten = Jetzt.getMinutes();
  var Sekunden = Jetzt.getSeconds();
  var Vorstd = (Stunden < 10) ? "0" : "";
  var Vormin = (Minuten < 10) ? ":0" : ":";
  var Vorsek = (Sekunden < 10) ? ":0" : ":";
  var Uhrzeit = Vorstd + Stunden + Vormin + Minuten + Vorsek + Sekunden;
  var Gesamt = Sekunden + 60 * Minuten + 60 * 60 * Stunden + 60 * 60 * 24
 
  if (DHTML) {
    if (NS4) {
      setContent("id", "Uhr", null, '<span class="Uhr">' + Uhrzeit + "<\/span>");
    } else {
      setContent("id", "Uhr", null, Uhrzeit);
    }
    window.setTimeout("ZeitAnzeigen()", 1000);
  }
  }
</script>

r15ch13 · 28. Februar 2014

Habe das hier mal zusammengebaut. Habe lediglich Moment.js verwendet, da es einige nuetzliche Funktionen zur Zeitmanipulation bereitstellt.

HTML:

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            body {
                font-family: Arial,sans-serif;
            }
            .station {
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>Dienstanzeige</h1>
            <div id="dienstanzeige"></div>
        </div>

        <script src="lib/moment-with-langs.js"></script>
        <script type="text/javascript">
            (function(){
                var lastTime = 0;

                // Beispiel Eintraege generieren
                function beispielDaten()
                {
                    var dienstanzeige = '';
                    var now = moment();
                    for (var i = 0; i <= 20; i++) {
                        now.add('seconds', 2);
                        dienstanzeige += '<div class="station"><a class="anker" name="' + now.format('X') + '">' + now.format('HH:mm:ss') + ' (Anker: ' + now.format('X') +')</a></div>';
                    };
                    lastTime = now.format('X');

                    document.getElementById('dienstanzeige').innerHTML = dienstanzeige;
                }

                // Wird jede Sekunde aufgerufen
                function update() {
                    // Format X gibt die Zeit als Unix Timestamp aus
                    var now = moment().format('X');

                    // Anker anspringen
                    window.location.hash = now;

                    // Seite aktualisieren
                    if(lastTime == now) {
                        window.location = 'index.htm';
                    }
                }

                // Clock
                function timedUpdate () {
                    update();
                    setTimeout(timedUpdate, 1000);
                }

                beispielDaten();

                timedUpdate();

            })();
        </script>
    </body>
</html>

Suche

JavaScript Anker ansprechen mit dynamischen Werten

Naranya

Cadet 4th Year

Daaron

Fleet Admiral

benneq

Fleet Admiral

Naranya

Cadet 4th Year

r15ch13

Lieutenant

Ähnliche Themen