Mehrere ThemenSeiten als iFrame ins HauptDokument laden, mit voller Länge bzw. kompletter Höhe!

[Manuel]

Hi. Wie kann ich mehrere ThemenSeiten als iFrame in ein HauptDokument laden, mit voller Länge bzw. kompletter Höhe?

Ist_ Seiten laden verkürzt, trotz width:100% height:100%. Die ScrollBalken nerven, das sind jetzt 2 ScrollBalken, von HauptDokument und von den Beiträgen.

Soll_ eingefügte Seiten sollen jeweils vollständig zu sehen sein! 1x ScrollLeiste vom HauptDokument soll reichen!

Ziel_ Neue Inhalte die sich in einzelnen HtmlSeiten befinden sollen einfach in Liste von iFrameSeiten mit Name+Adresse ergänzt werden können. Copy&Paste von Name des neu erstellten Dokuments in neuer Zeile, speichern, hochladen =gut. WebSeite lädt anschließend alles vollständig der Reihe nach ins HauptDokument, zB. Nachrichten.

So sieht entsprechende Zeile in dem HtmlHauptDokument aus (lädt nicht komplett, ScrollBalken) _

<div class="Information" style="padding:16px;">

<iframe width="100%" height="100%" src="Service.html" frameborder="0" style="
	margin:0px; padding:0px; border:none; outline: none;
	height:100%;width:100%;
	top:0px;left:0px;right:0px;bottom:0px; 
	background-color:rgba(0, 0, 128,0);
	overflow: hidden; 
	z-index:1
"></iframe>

<iframe width="100%" height="100%" src="Service2.html" frameborder="0" style="
	margin:0px; padding:0px; border:none; outline: none;
	height:100%;width:100%;
	top:0px;left:0px;right:0px;bottom:0px; 
	background-color:rgba(0, 0, 128,0);
	overflow: hidden; 
	z-index:1
"></iframe>

<iframe width="100%" height="100%" src="Service3.html" frameborder="0" style="
	margin:0px; padding:0px; border:none; outline: none;
	height:100%;width:100%;
	top:0px;left:0px;right:0px;bottom:0px; 
	background-color:rgba(0, 0, 128,0);
	overflow: hidden; 
	z-index:1
"></iframe>

<div>

[Rolf B]

Hallo Manuel,

Hast du mal height:fit-content probiert? Keine Garantie, ich kann gerade nicht testen, ob dass da unterstützt wird.

Ich hatte die Problemstellung noch nicht, aber das Web ist voll mit dieser Frage. Die Antworten kommen alle mit JavaScript Lösungen, sind aber schon älter, so dass fit-content vielleicht eine neuere Lösung ist. Bei JavaScript hat du vor allem die Voraussetzung, dass Rahmen und iframe Inhalte gleichen Origin haben müssen, sonst stellt sich der Browser quer.

Die Grundsatzfrage wäre wohl, ob iframe die richtige Lösung fürs Problem ist. Sind die eingeblendeten Seiten auch eigenständig nutzbar, oder ist das deine Art, deine Seite zu strukturieren?

Im Übrigen gehören die style Angaben eher in's Stylesheet als in ein style Attribut.

Rolf

[Manuel]

Hi. Hab ich eben probiert, in das Div INFORMATION ergänzt und Inhalt wackelt und blinkt beim runter blättern. Immernoch 2 ScrollLeisten nebeneinander.

Wie das gemacht werden soll ist egal. Inhalte sind keine kompletten Seiten sondern TeilSeiten.

IdealerWeise können im div INFORMATION auch per Link andere Seiten geladen werden.

Die Seite ist so aufgebaut oben ist Slider, unten am Bildscirm Logo + Menu mit Links. Wenn man blättert sind darunter im Div Information mehrere Seiten untereinander.

[Rolf B]

Hallo Manuel,

jetzt bekomme ich auch deine andere Anfrage einsortiert.

Also - das Laden von HTML Fragmenten in ein DIV geht - mit JavaScript. Sowas kannst Du auf Klick eines Buttons tun, oder auch beim Laden der Seite (DOMContentLoaded Event).

Du musst Dich auch entscheiden, was Du tun willst. Für einen iframe brauchst Du vollständiges HTML, der ist komplett eigenständig, mit eigenen Ressourcen, eigenem window-Objekt, eigenem DOM.

Für ein div brauchst Du ein HTML-Fragment, das in deine Seite hineinpasst. Zum Konstruieren des Ganzen kannst Du Dir vorstellen, dass das HTML Fragment in's DIV hineinkopiert wird. Wenn es dann so gestyled ist, dass es ordentlich aussieht, kannst Du es in eine eigene Datei auslagern und per AJAX nachladen.

Die Frage ist natürlich, ob das Ganze einen Sinn ergibt. Wenn du es NUR beim Laden der Seite machst, sind das nur unnötige HTTP Requests. Dann bist Du besser dran, die Fragmente am Server per SSI einzufügen (sofern dein Hoster das anbietet) oder sie als PHP auszuliefern. An der Stelle, wo eingebettet werden muss, schreibst Du <?php include "kontakt.html" ?> hin. Der Rest bleibt HTML.

Wenn Fragmente auf Mausklick nachgeladen werden, ist das was anderes.

Bei dem <div> Konzept ist auch zu beachten, dass Du dann ein einziges Dokument hast, und wenn so ein nachgeladenes Fragment ein <form> mitbringt und dieses Form gesendet wird, dann wird die komplette Seite neu geladen. Das kann man verhindern, aber dann musst Du den Submit des Forms ebenfalls über AJAX-Methoden steuern. Das ist eine Menge Arbeit.

Und wie im anderen Thread geschrieben: Wenn Du keinerlei Grundkenntnisse in JavaScript hast, und hier eine einfache Kopierquelle für dein Problem suchst, bist Du falsch.

Rolf

[pl]

Ich würde die Seiten nicht allzugroß machen. Weil, sonst passen die ja nicht in alle Browser rein. MFG

[JürgenB]

Ich würde die Seiten nicht allzugroß machen. Weil, sonst passen die ja nicht in alle Browser rein. MFG

und dann kommen die Beschwerden: „Mein Browserfenster ist geplatzt und der Inhalt liegt jetzt lose auf dem Desktop, wie kriege ich das wieder sauber?“ 😀

Gruß
Jürgen

[pl]

Ich würde die Seiten nicht allzugroß machen. Weil, sonst passen die ja nicht in alle Browser rein. MFG

und dann kommen die Beschwerden: „Mein Browserfenster ist geplatzt und der Inhalt liegt jetzt lose auf dem Desktop, wie kriege ich das wieder sauber?“ 😀

Ich meinte eher die lästigen Scrollgeschichten. Aber soll jeder selber... MFG