9 Frames zu einer verschmelzen lassen

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von brinki, 26.02.2007.

  1. brinki

    brinki Thread Starter MacUser Mitglied

    Beiträge:
    616
    Zustimmungen:
    1
    MacUser seit:
    27.05.2005
    Hallo liebe Macuser-Gemeinde!

    Ich habe das Problem, dass ich gerne eine Internetseite erstellen (nur mit HTML) würde und die in 9 Frames unterteilen möchte. Jedoch soll man nicht jedes Frame alleine Scrollen können, sondern nur alle zusammen.
    Gibt es dafür vielleicht irgendein Befehl der das ganze zusammenhält?
    Vielen Dank im vorraus für jegliche Art von Hilfe ;)
     
  2. koli.bri

    koli.bri Gast

    Wenn der Zweck der Frames der ist, dass sich immer nur ein Teil der Seite aktualisiert, würde ich Dir http-Requests ans Herz legen.
    Statt Frames machst du dann DIV-Elemente, deren Inhalt du mit JavaScript via http-Reuests aktualisiert.

    Somit bist du nur an JavaScript gebunden, was ja im Grunde auch schon fast zu HTML dazugehört (nicht schlagen, bitte).

    ansonsten fällt mir nichts ein, nein,ich bin mir sicher, dass es da nichts gibt.

    gruß
    Lukas

    PS.: Nein, ich werde es NICHT Ajax nennen!!!
     
  3. brinki

    brinki Thread Starter MacUser Mitglied

    Beiträge:
    616
    Zustimmungen:
    1
    MacUser seit:
    27.05.2005
    Danke erst mal für den Tipp! Hat denn vielleicht noch jemand eine andere Idee? Also einen leichteren Weg?
     
  4. Saugkraft

    Saugkraft Super Moderator

    Beiträge:
    9.969
    Zustimmungen:
    1.669
    MacUser seit:
    20.02.2005
    Hast du da nen Link, der nichts mit Ajax zu tun hat? Ajax läuft ja über einen XML Parser. Geht das auch ohne, wenn du es schon nicht Ajax nennst?

    Würde mich mal interessieren weil ich ein ähnliches Refresh-Problem hab.
     
  5. joachim14

    joachim14 MacUser Mitglied

    Beiträge:
    7.295
    Zustimmungen:
    433
    MacUser seit:
    08.02.2005
    Weil mir Deine Aufgabe nicht klar ist, rate ich mal.
    Du schaltest die Frames auf nicht scrollen, stellst aber - sagen wir die Höhe der Frames auf 500px. Alle Frames liegen in einem weiteren Frame mit einer scrollbaren Höhe von - sagen wir 200 bis 500 px. Damit wird teilweise - je nach scrollen - ein Teil des Inhalts der anderen Frames verdeckt.
    Ob Du so etwas gemeint hast?
    Und im übrigen bin ich der Meinung, dass vermutlich auch das mit div-Boxen zu machen ist.
     
  6. koli.bri

    koli.bri Gast

    Der Link, der mich zuder Technik von HTTP-Requests gebracht hat:
    http://developer.mozilla.org/de/docs/AJAX:Getting_Started

    Im Grunde hab ich genau diese Funktion auch genommen, die da steht.
    Als Codeschnipsel hab ich mir folgendes angelegt:
    PHP:
    /*
     * dat/js/request.js
     *    Requestfunktion fuer das gesamte Projekt
     *
     */
    var request_funcs = new Array();
    function 
    macheRequest(url,funktion) {
        
    http_request false;
        
        if (
    window.XMLHttpRequest) { // Mozilla, Safari,...
            
    http_request = new XMLHttpRequest();
            if (
    http_request.overrideMimeType) {
                
    http_request.overrideMimeType('text/xml');
        
    // zu dieser Zeile siehe weiter unten
            
    }
        } else if (
    window.ActiveXObject) { // IE
            
    try {
                
    http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (
    e) {
                try {
                    
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (
    e) {}
            }
        }
        
        if (!
    http_request) {
            
    alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
            return 
    false;
        }
        
    http_request.onreadystatechange = function(){
        if (
    http_request.readyState == 4) {
            if (
    http_request.status == 200) {
                
    dw("Funktion via Variable *Yeah*");
                var 
    func request_funcs[funktion];
                if(
    undefined != func){
                    
    func(http_request.responseText);
                }else{
                    
    alert("Diese Funktion " funktion " gibt es wohl nicht");
                }
                            
            } else {
                    
    alert('Bei dem Request ist ein Problem aufgetreten.');
            }
        }
    }
        
    http_request.open('GET'urlfalse);
        
    http_request.send(null);
    }
    Aufgerufen wird das ganze dann so:

    PHP:
    request_funcs['handle_funktion'] = handle_funktion;  // Abarbeitende Funktion
    macheRequest("pfad/zur/nachzuladenden/datei.html","handle_funktion"); // Request machen

    Die Funktion "handle_funktion()" sollte freillich vorher angelegt werden :) In der steht drin, was mit dem Wert, der zurückgegeben wird passieren soll.

    Die Unterschiede zu der Requestfunktion in dem link und zu meiner:
    Der Request wird Syncron, d.h. das Script pausiert so lange, bis die Ergebnisse da sind (Das Erste A von Ajax passt also nicht mehr)
    Nicht zwingend wird XML zurckgegeben, bei mir zum Beispiel sind es zu 95% HTML-Bruchstücke (Das X von Ajax passt also auch nicht mehr).
    Die abarbeitende Funktion wird als Objekt mitgeliefert.
    http://www.macuser.de/forum/showthread.php?t=239490

    Wenn man es einmal verstanden hat, ist es kinderleicht :)
    Muss halt nur einmal "Klick" machen und das wars :D

    gruß
    Lukas

    PS.: Kann sein, das in meiner Funktion noch ein Fehler ist, hab den aus meinem derzeitigem Projekt Schnipsel kopiert und dann ohne u testen ein wenig nachbearbeitet. Dürfte aber nur eine Klammer oder so sein, die fehlt, wenn überhaupt :D
     
    Zuletzt von einem Moderator bearbeitet: 27.02.2007
  7. brinki

    brinki Thread Starter MacUser Mitglied

    Beiträge:
    616
    Zustimmungen:
    1
    MacUser seit:
    27.05.2005
    Ich finds wirklich voll super nett das du dir so mühe gegeben hast! aber wenn ich ganz ehrlich bin weiss ich so gut wie nichts damit anzufangen =(
     
  8. koli.bri

    koli.bri Gast

    EDIT: und wichtig!
    Die macheRequest()-Funktion funktioniert so nur in Safari und Opera, FireFox meldet einen Syntaxfehler mit dem Ort der Geladenen Datei.
    Daher bitte mehr auf die Idee der Sache achten, nicht zu sehr auf den Quelltext)
    Edit ende...


    Ok, ich erklärs mal anhand eines Beispiel mit HTML-Dateien :)

    Wir haben die startseite, die, die wir im Browser direkt öffnen (Auf ein absolute Minimum reduziert)

    HTML:
    <html>
    <head>
    <title>blubb</title>
    <script type="text/javascript" language="javascript">
    var request_funcs = new Array();
    request_funcs['handle_inhalt'] = handle_inhalt_func;
    function macheRequest(url,funktion) {
        http_request = false;
        
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
        // zu dieser Zeile siehe weiter unten
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        
        if (!http_request) {
            alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
            return false;
        }
        http_request.onreadystatechange = function(){
        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                dw("Funktion via Variable *Yeah*");
                var func = request_funcs[funktion];
                if(undefined != func){
                    func(http_request.responseText);
                }else{
                    alert("Diese Funktion " + funktion + " gibt es wohl nicht");
                }
                            
            } else {
                    alert('Bei dem Request ist ein Problem aufgetreten.');
            }
        }
    }
        http_request.open('GET', url, false);
        http_request.send(null);
    }  
    
    function handle_inhalt_func(inhalthtml){
      document.getElementById('inhalt').innerHTML = inhalthtml;
    }
    </script>
    <!-- Kopfdaten-->
      <body>
        <div id="navi">
           <a href="javascript:macheRequest('home.html',handle_inhalt)">Home</a><br>
           <a href="javascript:macheRequest('impr.html',handle_inhalt)">Impressum</a><br>
           <a href="javascript:macheRequest('fotos.html',handle_inhalt)">Fotos</a><br>
        </div>
        <div id="inhalt">
    <!-- Hier steht der Inhalt drin, für diese Demo braucht aber nichts drin stehen-->
        </div>
      </body>
    </html>
    
    So, und dann haben wir noch drei weitere Dateien, eine fürs "Home", eine fürs Impressum und eine mit Fotos.
    Die sehen dann so aus: (Ich machs mal mit nur einer Datei, mit den anderen its genauso)
    HTML:
    <h1>HOME</h1>
    <p>Herzlich willkommen auf meiner Seite. Schaut doch mal ins Impressum oder in die Fotos</p>
    
    So, schritt für Schritt:
    Beim Aufruf der Seite steht im DIV "Inhalt" nichts drin, aber die Links können wir sehen.

    Klicken wir jetzt auf einen Link, wird die JS-Funktion "macheRequest" aufgerufen, und zwar mit zwei Parametern.
    Erstens die URL zu der Datei, die wir nachladen möchten, und zweitens den Namen der Funktion, die das ganze verarbeiten soll.
    Die "macheRequest" läd quasi im Hintergrund, den Inhalt der entsprechenden Datei in eine Variable, und zwar die "http_request.responseText".
    Um den Request verarbeiten zu können, haben wir ja den Namen der entsprechenden Funktion angegeben.(sie weiter unten für weitere Erklärungen hierzu)
    Ist der Request erfolgreich, wird der Inhalt von http_request.responseText, also der Datei die wir geöffnet haben, an die nächste Funktion, und zwar handle_inhalt_func weitergegeben. Und die macht nichts anderes, als dieen Inhalt in das Div-Element mit der ID "inhalt" zu schreiben.

    Das wars :)

    Danach sieht die Datei aus, als ob in der index.html der Inhalt von der home.html in dem Inhalts-Div stehen würde :)


    (Hier zu weiteren Erklärungen)
    Der Funktionsname, den wir mitgeben, ist eigentlich nur der Schlüssel eines assioativen Arrays. Dort drin steht der eigentliche Funktionsname als Objekt drin. der zweite Link in meinem vorherigen Post erklärt das ganze ein wenig ausführlicher. Aber dazu sollte man sich ein wenig mehr in die Substanz von JavaScript einlesen. SelfHTML kann ich hier leider nicht unbedingt empfehlen, was dieses thema angeht :(
    Wichtig zu wissen ist:
    Will man eine zweite abarbeitende Funktion, so muss man, neben der Funktion selbst, noch ein weitere Element dieses Arrays anlegen.
    Als "Index" muss dann der Name stehen, mit welchen man diese Funktion ansprechen möchte, und als Wert der eigentliche Funktionsname, OHNE anführungsstriche. Die beiden Werte dürfen auch gleich sein, hier hab ich es nicht gemacht, damit man sie unterscheiden kann :)

    So, hoffe, nun einige Fragen aus dem Weg geräumt zu haben :)

    gruß
    Lukas
     
    Zuletzt von einem Moderator bearbeitet: 28.02.2007
  9. cronix

    cronix MacUser Mitglied

    Beiträge:
    86
    Zustimmungen:
    1
    MacUser seit:
    29.12.2006
    koli.bri :D supi erklärung genau sowas hab ich gesucht.

    aber ich glaube nicht das der thread ersteller irgendwas auser bahnhof versteht?
    Ich tip eher mal auf totaler anfänger dem das ganze nicht so klar is.( das ist jetzt nicht beleidigend gemeint.)


    Ich denke es wäre gut wenn du mal versuchst dein projekt bei einem kostenlosen anbieter für webspace hochzuladen (funpic.de) und dann könen wir uns ein bild machen welches die lösung um eniges erleichtert.
     
  10. Saugkraft

    Saugkraft Super Moderator

    Beiträge:
    9.969
    Zustimmungen:
    1.669
    MacUser seit:
    20.02.2005
    Lukas, tausend Dank für die ausführliche Erklärung!

    Ich hab zwar schon Diverses mit XMLHttp gebaut, aber alles ASP basiert, also serverseitig. Dabei ging es in erster Linie um Abfragen von Daten einer Web-API. Die Daten werden dann fix und fertig an den Browser gesendet.

    Aber die Manipulation von Daten, die der Browser bereits hat, war genau das was mir gefehlt hat. ;)
     
Die Seite wird geladen...

Diese Seite empfehlen