malte: Inhalt laden ohne "Reload" - welche Möglichkeiten gibt es?

brauche ganz DRINGEND und schnell eure hilfe!

schaut mal auf die seite: link s.h. anhang

unten auf der seite soll sich der inhalt verändern.
allerdings möchte ich kein iframe benutzen - müsste doch auch ohne einen "reload" der ganzen seite gehen, oder?

wenn ich ein include in einen div-layer einbaue, kann ich es dann ähnlich wie ein iframe behandeln?

die inhalte könnte man auch in divs packen, die man dann per javascript zwischen display:block und display:none schaltet....
allerdings sind auch viele fotos dabei.

und wenn ich was mit einem hidden iframe anstellen!? das irgendwie onload seinen inhalt an eine div im parent übergibt.
da bin ich mir nicht sicher, ob es überall gut läuft.

kann man nicht die div-größe per link ändern? :-D

verzweifel hier langsam - wie würdet ihr es machen? habt ihr eventuell schon fertige codeschnipsel, da es so schnell wie möglich gehen muss.

wäre euch richtig dankbar, wenn ihr mir weiterhelfen könnt!
ps. entschuldigt die kleinschreibung - aber musste so schnell wie möglich gehen

  1. Huhu Malte

    brauche ganz DRINGEND und schnell eure hilfe!

    nach dieser "Anmoderation" ist mein Interesse an Deinem Posting schlagartig erloschen.
    Vermutlich geht es vielen anderen hier ähnlich.

    Wie man richtig fragt kannst Du in der FAQ nachlesen.

    http://forum.de.selfhtml.org/faq/

    Ansonsten, bleib mal locker

    http://www.rtbg.de/hidden/cooldown.html

    Viele Grüße

    lulu

    --
    bythewaythewebsuxgoofflineandenjoytheday
    1. Hey lulu

      ja, normalerweise ist das auch selbstverständlich mit der Fragestellung - aber es gibt halt Tage, an denen man echt verzweifelt und wenn es dann auch noch schnell gehen muss... heieieieiiei

      Würdest du dir denn mein Problem anschauen, wenn du die eine zeile überliest? :)

  2. brauche ganz DRINGEND und schnell eure hilfe!

    Dazu wurde ja schon alles gesagt.

    Aber weil's die Seite vom Lude ist und heute die Tour losgeht (ist's deswegen so dringend?):
    Nein. PHP wird auf dem Server ausgeführt, wenn ein Request eines Clients bearbeitet wird. Wenn die Seite beim Client ankommt, IST DIE BARBEITUNG BEREITS GESCHEHEN (entschuldigung fürs Schreien).

    Für solche Zwecke gibt es:
         1. frames
         2. iframes
         3. reloads

    Gruß, David

  3. Lieber malte,

    alles, was in diesem Flash-Zeuchs abläuft, ist nur für die Leute nutz- und sichtbar, die das Ausführen solcher Inhalte unterstützen (sei es durch die Installation des erforderlichen Plug-ins, oder auch durch das Erlauben von "aktiven Inhalten").

    Deine Seite soll in Suchmaschinen nicht gefunden werden (eine SuMa kann kein flash "sehen")?

    Auch wenn Du per "verstecktem Iframe" und Javscript ein offensichtliches Neuladen der Seite umgehen willst, das funktioniert auch wieder nur, wenn der Benutzer Javascript zulässt, bzw. überhaupt zur Verfügung hat.

    Mein Vorschlag:
    1.) Erstelle eine Seite komplett ohne Javascript und Flash, die für alle benutzbar ist.
    2.) Für Leute, die Javascript (erlaubt) haben, kannst Du diese Seite nun umgestalten und kannst nach dem Laden der Seite ein Script die Flash-Geschichten "nachträglich" in das Dokument "einpflanzen" lassen, wobei die design-technisch weniger spektakuläre Navigation (oder was sonst noch) ersetzt wird.
    3.) Dein Flash-Film ist so konstruiert, dass man mittels Javascript (oder heißt das dann Actionscript?) bei einem "Seitenwechsel" eben diesem Flash-Film "sagt", welches Kapitel (oder wie man das in Flash nennt) er nun abspielen soll, da man ja nun auf einer entsprechenden Unterseite ist. Damit brauchst Du das Neu-Laden der Seite nicht mehr zu umgehen.

    Deine Idee mit dem Versteckten Iframe ist keine schlechte, aber sie ist sehr umständlich zu realisieren.

    Du könntest den kompletten Content in ein <div> setzen, dem Du eine ID (z.B. "seiteninhalt") gibst. Wenn nun jede Deiner Unterseiten solch ein <div> hat, dann kannst Du aus einem versteckten Iframe dessen <div> auslesen und diesen Inhalt (vielleicht per meinDiv.innerHTML) in Deine Seite übertragen.

    Ich würde so vorgehen: Mit onload prüfst Du ja automatisch auf Javascript, denn wenn da kein Javascript ist, dann wird auch kein onload ausgeführt. Also onload rufst Du eine Funktion auf, die Deine Seite "initialisiert", indem sie die Flash-Design-Geschichte ersetzend auf die vorhandenen Elemente bastelt. Daraufhin erzeugst Du ein Iframe (da könnte "createElement" helfen), welches Du aber nicht in den Dokumentenbaum einbindest, weshalb es unsichtbar bleibt. Danach versiehst Du _jeden_ Link im "seiteninhalt" Deiner Seite mit einem onclick-Eventhandler.

    Die Funktion dieses Eventhandlers ist nun sehr interessant. Sie soll das Linkziel ermitteln, um das entsprechende Dokument in das Iframe zu laden (deinIframe.src=deinLinkziel.href oder so). Sie muss nun überprüfen, ob das Iframe geladen hat, bevor sie auf dessen Inhalte zugreifen kann. Also musst sie auf das Iframe auch einen Eventhandler setzen (onload) und anschließend, wenn das Iframe fertig geladen hat, diesen wieder löschen und den "seiteninhalt" des Iframes in den "seiteninhalt" Deiner Seite kopieren. Während das Iframe unsichtbar geladen wird, solltes Du dem Benutzer eine kleine Animation zeigen, damit er versteht, dass sich da jetzt etwas tut, sonst muss er denken, dass Deine Seite nicht benutzbar ist.

    Alles in allem finde ich es sehr umständlich. Vielleicht solltest Du von der "verstecktes Iframe"-Lösung Abstand nehmen?

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    1. Hiho,

      Deine Seite soll in Suchmaschinen nicht gefunden werden (eine SuMa kann kein flash "sehen")?

      http://www.google.de/search?hl=de&q=index+filetype%3Aswf&btnG=Suche&meta=
      Klicke und staune! Nur damit dein Wissenstand mal an die aktuelle Zeit angepasst wird :)

      Marc

  4. Hi,

    Du kannst einen versteckten Iframe nutzen, um den Inhalt des divs zu ändern. Das ist aber "von Hand" ziemlich fitzelig zu coden:

    1. das Target Deiner Verweise ist immer der versteckte IFrame
    2. in diesen lädst Du JS-Code, der in etwa so aussieht:

    <script>
    newSource = "<b>Hallo, ich bin der neue Source des Divs</b>";
    newSource += "und ich kann beliebiger HTML-Source sein.";

    targetDivId = 'contentDiv';

    parent.setSource(targetDivId, newSource);
    </script>

    3. Die Funktion setSource schreibt dann den neuen Inhalt in den div im Parent-Window. Ungefähr so:

    <script>
    function setSource(targetId, src)
    {
      // Hier willst Du sicherlich checken, ob targetId existiert, aber egal:
    document.getElementById(targetID).innerHTML = src;
    }
    </script>

    Das funktioniert mit aktiviertem JS bestens in Moz, Opera und IE auf dem PC und ich wüßte nicht, warum es irgendwo sonst nicht laufen sollte...

    Aber wie gesagt: das Alles ohne Skript-Automatisierung zu coden "is a pain in the arse"

    Gruß.

  5. Hi,

    ich hab neulich mal ein (internes) Tool geschrieben, in das eine Suche integriert war... Das waren dann zwei verschachtelte Iframes...

    TEXTBOX in einem Dokument --> Link zur Suche --> Iframe öffnet sich mit Suchfeld

    SUCHFELD --> TEXTBOX --> Eingabemöglichkeit für Stichwörter --> onkeyup --> Übergabe an Iframe unter Textbox

    Iframe --> Gibt Suchergebnisse aus --> Benutzer klickt an --> wird mit parent.parent.getElementById(...).value übernommen...

    Übertragen auf deinen Fall muss das Teil natürlich seine Ergebnisse nicht in eine Textbox ausgeben, sondern eben in ein <div>:

    <html>
    ...
    <body onload="parent.getElementById('id').innerHTML='<?php echo inhalt; ?>';">
    ...
    </html>

    E7

    1. Danke dir E7 und auch den anderen.

      <body onload="parent.getElementById('id').innerHTML='<?php echo inhalt; ?>';"> klingt super - allerdings weiß ich nicht, wie genau ich es nun anstellen muss (habe bisher nur Actionscript und kaum die wirklich wichtigen Sachen gelernt :-/).

      Falls du ein paar Minuten Zeit, könntest du mir dann ein Beispiel nennen, wie es funktionsfähig laufen würde?

      Gruß Malte

      1. Lieber malte,

        heißt Du mit Nachnamen nicht Kiefer?

        <body onload="parent.getElementById('id').innerHTML='<?php echo inhalt; ?>';"> klingt super

        Also das klingt nicht super, das klingt (finde ich) dämlich! Wenn Du eine komplette Frameseite in eine Javascript-Anweisung packst, dann muss das syntaktisch korrekt gemacht werden, sprich Dinge wie schließende Tags wollen escaped sein, und sowas. Ausserdem kannst Du solches schlecht (es geht, aber...!) in ein Eventhandler-Attribut packen! Dazu definierst Du besser im <head> eine Javascript-Funktion mit dem ganzen Gesülze, die Du dann per <body onload="meineFunktion()"> aufrufen lässt!

        Was hat Dir an meiner Lösung nicht gefallen, bzw. war Dir unverständlich?

        Liebe Grüße aus Ellwangen,

        Felix Riesterer.

        1. Nabend Felix,

          heißt Du mit Nachnamen nicht Kiefer?

          Nee

          Was hat Dir an meiner Lösung nicht gefallen, bzw. war Dir unverständlich?

          »»Zu Vorschlag 1. und 2.:

          • Nein, Javascript und Flash sind schon okay dafür.

          3.) Dein Flash-Film ist so konstruiert, dass man mittels Javascript (oder heißt das dann Actionscript?) bei einem "Seitenwechsel" eben diesem Flash-Film "sagt", welches Kapitel (oder wie man das in Flash nennt) er nun abspielen soll, da man ja nun auf einer entsprechenden Unterseite ist. Damit brauchst Du das Neu-Laden der Seite nicht mehr zu umgehen.

          • Aber da kann ich doch nicht das Neu-Laden der Seite umgehen!?
          1. Lieber malte,

            3.) Dein Flash-Film ist so konstruiert, dass man mittels Javascript (oder heißt das dann Actionscript?) bei einem "Seitenwechsel" eben diesem Flash-Film "sagt", welches Kapitel (oder wie man das in Flash nennt) er nun abspielen soll, da man ja nun auf einer entsprechenden Unterseite ist. Damit brauchst Du das Neu-Laden der Seite nicht mehr zu umgehen.

            • Aber da kann ich doch nicht das Neu-Laden der Seite umgehen!?

            Das bräuchtest Du auch nicht mehr, da Dein Film ja nur einmal geladen wird, also im Browsercache vorhanden ist. Da das auf der neu zu ladenden Seite bei onload startende JavaScript "weiß", welche Unterseite das ist, kann es dem Film sagen, wie er sich verhalten soll, falls Du für die verschiedenen Unterseiten verschiedene Animationen haben möchtest.

            Weiter unten hatte ich aber eine (vergeblich?) ausführliche Möglichkeit beschrieben, mit der man das Neuladen der Seite scheinbar umgehen kann (was aber nur so aussieht), indem man einen versteckten Iframe einsetzt.

            Du solltest aber bei all den schönen Spielereien unbedingt auch eine Navigation und Erreichbarkeit ohne Javascript und Flash ermöglichen!

            Liebe Grüße aus Ellwangen,

            Felix Riesterer.

            1. Hey Felix,

              danke dir schon einmal für die Geduld mit mir :-)
              Du hast recht mit dem versteckten Iframe - so machen wir's jetzt.

              Allerdings kann ich es nicht so richtig umsetzen - ic hweiß zwar, wie es in etwa aussehen muss, aber bei der Umsetzung hapert es dann noch sehr.

              Wärst du so lieb und könntest mir wenn du ein paar Minuten Zeit hast ein kleines Tutorial schreiben? Wenn du magst, schicke ich dir auch die ganzen Daten gezippt zu.

              1. Lieber malte,

                Wärst du so lieb und könntest mir wenn du ein paar Minuten Zeit hast ein kleines Tutorial schreiben? Wenn du magst, schicke ich dir auch die ganzen Daten gezippt zu.

                Nix da! ;-) "Self" als englische Vokabel ist dir bekannt?

                Vorschlag: Du lädst eine Seite hoch, die komplett ohne Javascript und Flash benutzbar ist (zusätzlich zu der bereits von Dir genannten), und ich helfe Dir, Schritt für Schritt, diese mit Javascript "aufzupäppeln", bis das Ergebnis der ersteren (so gut wie möglich) entspricht. Im nächsten Schritt könnte man dann die Iframe-Geschichte lösen.

                So hätten alle etwas davon: Deine Besucher, da sie _auf jeden Fall_ an alle Deine Inhalte drankommen; Du, weil Du jede Menge dazulernst; ich, da ich das mit dem Iframe so auch noch nie gemacht habe und meinerseits ebefalls dazulerne; und andere Forumsbesucher könnten uns helfen, bzw. sich daran auch weiterbilden. Deal?

                Liebe Grüße aus Ellwangen,

                Felix Riesterer.

                1. *hihi* Jaha, ist gebongt.

                  Fertige es schnell an und melde mich dann erneut mit dem Link.
                  Danke dir schon einmal!

                  1. Huhuuuu,

                    hier der Link für die Seite

                    und hier das ganze als Zip

                    1. Lieber,

                      Deine Seite hat noch keinen anständigen Quelltext! Da fehlt ein DOCTYPE und semantisch ist das HTML auch (noch) nicht. Von dem Dreamweaver (oder womit Du diesen Quelltext erstellt hast) lassen wir zur Übung mal die Finger! Das erlaubt es uns auch sinnvollere Namen für die Klassen/IDs zu vergeben. Dann verschlanken wir das Ganze zu diesem hier:

                        
                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
                      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
                      <head>  
                      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  
                      <title>J&ouml;rg Ludewig // Professional Cyclist</title>  
                      <link rel="SHORTCUT ICON" href="ludewig.ico">  
                      <link rel="stylesheet" type="text/css" href="css/main.css" />  
                      <script type="text/javascript" src="scripts/lude_js.js"></script>  
                      </head>  
                      <body onload="init()">  
                      <div id="nav-div">  
                         <ul id="oben">  
                            <li><a href="#">News</a></li>  
                            <li><a href="#">Technik</a></li>  
                            <li><a href="#">Links</a></li>  
                         </ul>  
                         <ul id="mitte">  
                            <li><a href="#">Presse</a></li>  
                            <li><a href="#">Gallerie</a></li>  
                            <li><a href="#">Impressum</a></li>  
                         </ul>  
                         <ul id="unten">  
                            <li><a href="#">Privat</a></li>  
                            <li><a href="#">Sponsoren</a></li>  
                            <li><a href="#">G&auml;stebuch</a></li>  
                         </ul>  
                         <p><a href="javascript:slideUp()">up</a> | <a href="javascript:slideDown()">down</a></p>  
                      </div>  
                        
                      <div id="contents-layer">  
                      <h1>inhalt :-)</h1>  
                      <p>Lorem ipsum dolor sit amet...</p>  
                      </div>  
                      </body>  
                      </html>  
                      
                      

                      Du siehst, dass ich mich bemüht habe, die Elemente Deiner Seite in passende HTML-Elemente zu verpacken. Diese Layout-Tabelle für Deine Links habe ich durch eine ungeordnete Liste ersetzt, die man mit CSS ebenso darstellen kann, die aber ohne CSS/Javascript/Flash trotzdem für alle und jeden zugänglich ist.

                      In Deiner CSS-Datei stand ja heftig viel unbenutzter Code! Ich habe für mich das Wesentliche behalten. Dieses hier:

                        
                      #nav-div {  
                          position:absolute;  
                          right:0px;  
                          top:0px;  
                          width:100%;  
                          height:318px;  
                          z-index:1;  
                          background: url(../images/bg_basic.gif) repeat-x;  
                          border-bottom: 5px solid #666666;  
                      }  
                      #nav-div ul {  
                          display: block;  
                          width: 300px;  
                          position: relative;  
                          left: 53%;  
                          top: 163px;  
                          margin: 0;  
                          padding: 0;  
                      }  
                      #nav-div ul#mitte { top: 187px; }  
                      #nav-div ul#unten { top: 211px; }  
                      #nav-div ul li { list-style-type: none; float: left; width: 90px; }  
                      #nav-div p {  
                          width: 135px;  
                          height: 28px;  
                          margin: 0;  
                          padding: 0;  
                          text-align: center;  
                          background: url(../images/bg_btn.gif) no-repeat 0px 0px;  
                          position: absolute;  
                          top: 318px;  
                          right: 335px;  
                      }  
                        
                      #contents-layer {  
                          position: absolute;  
                          top: 360px;  
                          padding: 0 30px;  
                          width: auto;  
                          z-index:4;  
                      }  
                      
                      

                      Jetzt bist Du dran, eine fertige Version zu basteln, die mit Content und allem navigierbar ist. Wenn mal zwei Seiten stehen, dann kann man auch die Scripte zum Iframe-Nachladen ausprobieren.

                      Liebe Grüße aus Ellwangen,

                      Felix Riesterer.

                      1. Nabend Felix,

                        hier gibt es die Zip Datei.

                        Allerdings reicht mein Wissen noch nicht ausreichend dafür aus - ist mein Ansatz denn wenigstens richtig? :-(

                        1. Lieber malte,

                          ich habe Deine Zip-Datei soeben mal etwas ausprobiert.

                          Erster Befund: Eine Navigation mit Adressen à la http://domain.tld/datei.php?kategorie=irgendwas sind hier wirklich nicht nötig und zudem für Suchmaschinen nicht der Hit (schlechtere Rankings)! Und wenn es später (wenn die Seite steht) doch noch sein müsste, dann sollte man das ganze per mod_rewrite (ein Modul des Apache-Webservers) wieder "verstecken".

                          Dass das klappt kannst Du auf meiner Schulhomepage sehen, die nach außen hin nicht so aussieht, intern aber alles über eine zentrale index.php?pfad=/pafd/zur/html/datei.html steuert. Per mod_rewrite sieht man das nicht mehr und google belohnt mich mit zum Teil wirklich schönen Rankings!

                          Zweiter Befund: Bitte lasse alles für die Entwicklung als reine HTML-Dateien sein. Das "Umwandeln" in PHP-Dateien wäre erst ein wesentlich späterer Schritt. Dazu kommen wir in Phase 3. Jetzt muss erstmal eine Seite entstehen (MIT INHALT!), die komplett ohne JS navigierbar ist! Das JS kommt erst in Phase 2. Wir sind in Phase 1, beschäftigen uns also mit reinem (semantischen!) HTML und CSS.

                          Wenn ich soweit bin, poste ich Dir hier meine Modifikationen.

                          Liebe Grüße aus Ellwangen,

                          Felix Riesterer.

                        2. Lieber malte,

                          jetzt hab ich was für Dich!

                          Benenne alle inhaltlichen Seiten um in *.html! Das ist wichtig! Aus diesen HTML-Dateien werden von Deiner main.php alle weiteren HTML-Inhalte eingelesen, wenn der User Javascript deaktiviert, oder nicht verfügbar hat. Der Code in Deiner main.php hierzu ist folgender:

                            
                          ...<div id="content-layer">  
                          <?php  
                          // Dynamischen Seiteninhalt zusammenstellen  
                            
                          // prüfen, ob angeforderte Inhalte existieren  
                             include('config.php');  
                             $einzubinden = "start.html";  
                             if(isset($_GET['content']) && isset($seiten[$_GET['content']]))  
                                {  
                                $einzubinden = $seiten[$_GET['content']];  
                                if(!file_exists($einzubinden)) $einzubinden = "error.html";  
                                }  
                            
                          // Inhalte einbinden  
                             $datei = implode("", file($einzubinden)); // einzubindenede HTML-Datei einlesen  
                            
                             // alles zwischen <div id="content> und </div></body> herausschneiden  
                             // es dürfen in der einzubindenden HTML-Datei zwischen dem letzten </div> und dem schließenden </body>  
                             // keine weiteren Zeichen mehr stehen, die etwas anderes als Tabs, Leerzeichen oder Zeilenumbrüche sind!  
                             $content_html = preg_replace('/(?is)^.*<div[^>]*id="content">(.*)<\/div>[ \r\n\t]*<\/body>.*$/', "\\1", $datei);  
                            
                             // so, und jetzt den HTML-Code des Contents ausgeben  
                             echo $content_html;  
                            
                          ?>  
                          </div>...
                          

                          Es hat sich in Deiner Javscript-Datei ein Fehler eingeschlichen! Wenn Du eine Variable in Javascript benennen willst, dann ist das Minuszeichen als Bestandteil des Namens verboten! Nimm den Unterstrich! Ebenfalls gemeckert hat meine Javascript-Konsole bei dem Kommentar nach dem Punkt bei
                          && document.getElementsByTagName('main')[0]. /* ??? */ )
                          Mach den letzten Punkt vor dem Kommentar weg, dann stört es nimmer. Diese Funktion kommt ja erst noch...

                          Um das Javascript kümmern wir uns beim nächsten Mal. Sorge zuerst dafür, dass Deine Seite komplett _ohne_ Javascript funktioniert! Nutze Dein PHP dafür, wie oben beschrieben!

                          Liebe Grüße aus Ellwangen,

                          Felix Riesterer.

                          1. Lieber malte,

                            ich fürchte der Thread versinkt bald im Archiv... Vielleicht solltest Du mir zur Sicherheit eine Mail schicken?

                            Liebe Grüße aus Ellwangen,

                            Felix Riesterer.

                            1. Lieber malte,

                              *push*

                              hehe.

                              Liebe Grüße aus Ellwangen,

                              Felix Riesterer.

  6. Hi,

    brauche ganz DRINGEND und schnell eure hilfe!
    schaut mal auf die seite: link s.h. anhang

    Wenn es so dringend ist, wie kommt es dann, daß Du uns eine ewige Wartezeit bis zum endgültigen Aufbau dieser Seite zumutest?
    So 20 Sekunden nach Start des Flashteils hab ich die Seite weggeklickt, da nicht abzusehen war, wann das Ding endlich fertig sein könnte (rechts waren 4 oder 5 Links erschienen).

    ps. entschuldigt die kleinschreibung - aber musste so schnell wie möglich gehen

    Dadurch liest es sich schlechter und langsamer, fördert also schnelle Antworten überhaupt nicht.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.