Alternative zu IFrame

[Linus]

Hallo zusammen,
zuerst möchte ich euch mitteilen, dass ich ein Anfänger was Html und co angeht bin und wahrscheinlich aus eurer sicht hier ziemlich dumme Fragen stelle, deswegen bitte ich um Verständnis für solche Fragen.

Also ich will eine Website erstellen, die eine Navi hat einen Inhaltsbereich, eine dauerhafte Überschrift, Footer usw.
Da ich nicht will, dass die ganze Zeit die komplette Seite neugeladen wird hab ich bis jetzt auf IFrames zurückgegriffen und einfach den Inhalt der Frames wechseln lasse. Das Problem die IFrames werden nicht bündig dargestellt und sehen dadurch "scheiße" aus.
So jetzt meine Frage, kann ich den IFrame ersetzen, zB durch ein Layer, welches möglichst auch HTML-Seiten als Inhalt hat und wo ich durch einfaches Java den Inhalt wechseln lassen kann?

Gruß,
Linus

PS: Vielen Dank im Vorraus an alle die Versuchen mich zu lehren ;)

[Roland]

Da ich nicht will, dass die ganze Zeit die komplette Seite neugeladen wird hab ich bis jetzt auf IFrames zurückgegriffen und einfach den Inhalt der Frames wechseln lasse.

Die Lösung ist Ajax.
Du kannst mittels einer Funktion dynamisch Inhalte in ein z.B. bestehendes div Element schreiben lassen. Das ist ungefähr das gleiche, wenn du auf google gehst und was eintippst, dann erscheinen direkt Suchergebnisse ohne das du fertig geschrieben hast. Geht dann natürlich einen Schritt weiter und ruft die Funktion jedes mal auf, wenn du ein keyUp hast, aber das ist nur ein Beispiel.

function ajax(to,url) {  
  
 var xmlhttp;  
  
 if(window.XMLHttpRequest)  
  {  
   // Code für IE7+, Firefox, Chrome, Opera, Safari  
   xmlhttp=new XMLHttpRequest();  
  }  
   else if(window.ActiveXObject)  
    {  
     // Code für IE6, IE5  
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
    }  
     else  
      {  
       alert("Fehler.");  
      }  
  
 xmlhttp.onreadystatechange=function() {  
  
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200)  
   {  
    var divinhalt = xmlhttp.responseText;  
    document.getElementById(to).innerHTML = divinhalt;  
   }  
 }  
  
 xmlhttp.send(null);  
  
} 

Ich habe es jetzt gerade nicht getestet, das Hauptscript von mir ist ein wenig komplexer und kann auch Variablen übergeben etc., aber in deinem Falle brauchst du ja nicht mehr.

Es funzt so: Dein "iFrame" ersetzt du durch ein <div id="Content"></div>

Dann setzt du Links: <a href='javascript:ajax("Content","seite.html");'>Link</a>

Beachte aber auch, dass nicht jeder Javascript aktiviert hat.

Gruß,
Roland

[Linus]

Hallo Roland,

Danke für die schnelle Hilfe, was mach ich denn, wenn ich mehrere Inhalte hab,
z.B:
 einmal spezifischer Inhalt
 einmal spezifische Navi

Kann man dann bei der Id einfach "content1" & "content2" nutzen??
Und wenn ich jetzt mit einem Link beide Inhalte verändern will,
was muss ich dafür tun?

Gruß,
Linus

PS: Danke dein Tipp hat mir schon super weiter geholfen :D

[Roland]

Danke für die schnelle Hilfe, was mach ich denn, wenn ich mehrere Inhalte hab,
z.B:
einmal spezifischer Inhalt
einmal spezifische Navi

Ist ganz einfach. Du rufst die Funktion einfach zweimal auf. Einmal mit dem Content und einmal mit der Navigation. Beachte dabei aber, dass Die Navigation auch eine eindeutige ID braucht.

<a href='javascript:ajax("Content","seite-mit-inhalt.html"); ajax("Navigation","navigation.html");'>Link ruft neuen Content und ne Navigation auf</a>

Das ist der Vorteil, wie das Script aufgebaut ist. Du kannst das beliebig erweitern.

Gz,
Roland

[gast_42]

Das ist der Vorteil, wie das Script aufgebaut ist. Du kannst das beliebig erweitern.

du hast so aber keinen Rettungsring falls das Script versagt. Insofern ist es unbrauchbar, Abhilfe schafft sowas wie:

<a href="seite.html" onclick='ajax("Content",this.href);return false;'>Link</a>

Also: ajax wenn verfügbar, direkt laden wenn nicht. Das lässt sich für Eventualitäten (JavaScript da, aber AJAX tuts nicht) weiter ausbauen, dann sollte die Funktion eine entsprechende Rückmeldung (false oder true) liefern.

[Roland]

Beachte aber auch, dass nicht jeder Javascript aktiviert hat.

Wie ich im ersten Beitrag erwähnte, aber die Lösung hast du ja so auch noch bekommen:

<a href="seite.html" onclick='ajax("Content",this.href);return false;'>Link</a>

Die Sache mit JS ist oftmals eine schwierige. Und wärest du mein Kunde, dann würde ich dir sogar die Ajax-Methode ausreden, wegen SEO. :-)

Gz,
Roland

[jobo]

Hallo,

es ist Javascript, nicht Java. Du kannst zB. einfach alle Seiten auf eine packen und per Javascript dann immer die entsprechende Stelle anzeigen lassen. Ist für einen Anfänger sicherlich nicht ganz einfach. Die 0815-Lösung bleibt, dass Du die Seite immer komplett neu lädtst. Serverseitig könntest Du dir mit PHP und "include()" zB. die Seite effizienter zusammenstellen. Mit Javascript gäbe es noch die Möglichkeit per AJAX/XMLHttpRequest Dir die einzelnen Inhalte nachzuladen. Für einen Anfänger aber auch nicht besonders einfach. Wenn es Dir nur an der Optik liegt, sieh zu, dass Du das hinbekommst, das geht nämlich, würde ich mal behaupten. Musst dem IFrame ein paar Attribute geben, dass er keine Rahmen und Abstände anzeigt.

Gruß

jobo

[Matthias Apsel]

Om nah hoo pez nyeetz, jobo!

es ist Javascript, nicht Java.

Genau, der Unterschied zwischen beiden ist riesig.

Matthias

[Kai345]

[latex]Mae  govannen![/latex]

Also ich will eine Website erstellen, die eine Navi hat einen Inhaltsbereich, eine dauerhafte Überschrift, Footer usw.
Da ich nicht will, dass die ganze Zeit die komplette Seite neugeladen wird

Warum nicht? Durch serverseitige Komprimierung wird das Datenvolumen ohnehin stark reduziert.

So jetzt meine Frage, kann ich den IFrame ersetzen, zB durch ein Layer, welches möglichst auch HTML-Seiten als Inhalt hat und wo ich durch einfaches Java den Inhalt wechseln lassen kann?

Sehr schlechte Idee. Eine Site, die ohne Javascript überhaupt nicht benutzbar ist, ist defekt. Eine Site muß ohne Javascript durchaus nicht komplett nutzbar sein, die Grundinformationen allerdings sollten auch Ohne zugänglich sein.

Es gibt sinnvollere Alternativen.

Stur lächeln und winken, Männer!
Kai