HTML5 - Framset nachbilden

cumulonimbus8

Fleet Admiral
Registriert
Apr. 2012
Beiträge
18.398
Moin.

Im »Bastel-Keller« fand ich einen alten Satz Dateien den ich hier mal auf die Funktionsstruktur heruntergebrochen habe.
HTML:
start.htm
<html>
<head>
</head>
<frameset frameborder="0" framespacing="0" rows="60,*">
 <frame name="tabs" src="tabs.htm" noresize>
 <frameset frameborder="0" framespacing="0" rows="100%,*">
  <frame name="haupt" src="haupt.htm" noresize>
 </frameset>
</frameset>
</html>

tabs.htm
<html>
<head>
 <base target="haupt">
</head>
<body>
 <a href="seite1.htm">Seite 1</a>&nbsp;&bull;&nbsp;<a href="seite2.htm">Seite 2</a>
</body>
</html>

haupt.htm
<html>
<head>
</head>
<body>
<strong>Bitte w&auml;hlen</strong>
</body>
</html>


seite1.htm
<html>
<head>
</head>
<body>
<strong>Seite 1</strong>
</body>
</html>

seite2.htm
<html>
<head>
</head>
<body>
<strong>Seite 2</strong>
</body>
</html>
Der Nutzer bekommt eine Auswahlzeile und im »Haupt-Frame« wird dann die jeweilige HTML angezeigt. Kalter Kaffee, seit HTML5 gefühlt verboten.

Google will mir den <iframe> verkaufen. Den kenne ich, um, wie es in Beschreibungen so schön genannt wird, innerhalb einer Seite (Page) eine weitere Website anzuzeigen.
Und Google erklärt mir brav was <frameset> tut, aber die Frage »frameset in html5 nachbauen« überfordert die Suchmaschine.

Wie baut man nun in HTML5 die Funktionalität nach - ein Auswahlmenü und ein Zielfenster in dem ausgewählte Inhalte angezeigt werden?
Alles in eine Datei und mit z.B. JS-Buttons Bereiche sichtbar und unsichtbar schalten - OK, das könnte ich machen. Nur wäre mir das Konzept des Nachladens-von-Modulen lieber. Sparsame Hinweise nannten PHP, aber diese ›Fremdsprache‹ spreche ich nicht… 😇

→ Ich lasse mal meine Gedanken in der Vergangenheit schweifen. Damals musste man umständlich einen Flash-Player aufziehen wo heute ein simples Video-Tag hinreicht. Hier kommt es mir andersrum vor. Einfache Frames scheinen zu einer Großbaustelle zu werden.
Da muss es doch eine Lösung geben (die Google nicht einfällt). Eine Lösung klein und bescheiden. Ohne zu so was etwa WordPress anzustrengen.

CN8
 
Ich verstehe nicht, wo du jetzt das Problem mit iframe hast?
 
Baue die 5 Files unter Auslassen von FrameSet und unter Benutzung von IFrame nach sodass sie gnauso funktionieren.

IFrame lädt eine Site in den IFrame - aber dieser IFrame hat offenbar keine Zieladresse um in Links angegebene andere Pages vom »Menü« aus in diesen IFrame zu laden und die vorgegebene Site zu ersetzen.
Mir ist das jedenfalls nicht gelungen.

CN8
 
HTML:
<a href="http://url/seite1" target="iframe1">Seite 1</a>
<a href="http://url/seite2" target="iframe1">Seite 2</a>
<iframe name="iframe1" src="http://url/einstieg"></iframe>
 
  • Gefällt mir
Reaktionen: netzgestaltung und madmax2010
Dankeschön!
Und kein Beispiel von Google kann diese 3 simplen Zeilen als Ausgangsbasis liefern. Jämmerlich…

Nun muss nur noch ein anders Problem gelöst werden..:
1620829533531.png

Der primitive Mechanismus FrameSet klebt einfach Seiten aneinander. IFrame aber erzeugt ein Objekt mit, äh, ja, einem Frame.
1620830068563.png

Das ist hier nur schnell zusammengeklöppelt; Größe und Farben unwichtig (dazu las ich nebenbei was bei Google…) Aber wie bekommt man, wenn überhaupt, den Rahmen da weg? Beim Durchblättern in Google fand ich zuvor nichts zu diesem Aspekt.
Ein Ersatz sollte nun doch recht vollumfänglich sein.

CN8
 
  • Gefällt mir
Reaktionen: --//--
Code:
<iframe style="width:100px; height:100px; border:none;" scrolling="no" src="www.google.de"/>
 
@ Bagbag
Wenn man wie ich stets zu blöd zum Googeln ist…
…weil man nicht weiß nach welchen Stichworten man suchen muss…
…und weil man von einer anderen Seite aus das angegangen ist, dann bekommt man eben nicht diese Lösung. (Ich hätte die 2 Begriffe so nicht eingesetzt.)

@ Defender1st
Und wieder ein Dankeschön da erneut Google und Erklärseiten sich unfähig zeigen alle möglichen Parameter gleich sichtbar aufzulisten.

→ Ich bin vor lauter Bildern und Antworten hier allerdings nicht mal dazu gekommen nochmals die Syntaxmöglichkeiten des IFrames genauer nachzuschlagen. Man vergebe mir das.

CN8


🎯 Volltreffer :D
Jetzt habe ich eine Lösung und stelle fest, dass ich mir mit dem Plan dahinter (einzublendende Inhalte = die Quellen, auf ein Minimum zu reduzieren um auf nur einer Seite Optik aufzubauen) ein anderes Schlagloch gegraben habe.
Ja… Kleine Sünden werden sofort bestraft…
 
Zuletzt bearbeitet:
Mal später prüfen wie Object oder Embed bei der Menügeschichte funktionieren.
(Mein Urproblem war allein der Menügesteuerte Aufruf; und da bekam ich sofort den IFrame serviert.)
CN8
 
Das wäre jetzt Off Topic; aber SelfHTML hatte mich vor vielen Jahren noch begeistert, aber derzeit steht da sehr viel Nichts drin und wenig direkte Information. Direkte Syntax-Regeln und -Tipps vermisse ich regelrecht.
Ich ziehe W3CSchool vor wenn ich bei Google Treffer habe.

Den Umbau nach dem neuen Muster will ich in Angriff nehmen wenn erstmal alte Inhalte angepasst wurden.

CN8
 
Da habe ich mir ja was angelacht…
Auch wenn dies nicht mehr zum Urproblem gehört - das hat sich gottseidank dank euch gelöst - will ich mit meiner Nachfrage in diesem Thread bleiben.

Automatische Höhe des IFrames
Tja, man meint eine elegante Lösung gefunden zu haben und stößt auf eine Bombe (für deren Grund mir jedes Verständnis abgeht - alles Unmögliche geht, aber beim Möglichen feht wie so Oft das Wesentliche, Profane).
Die Höhe des IFrames lässt sich nicht dynamisch gestalten… Wenigstes nicht in allem Aktuellen auf Chromium-Basis.

Hier die Eckdaten die auf Bagbag beruhen
<iframe id="IRahmen" name="IRahmen" src="haupt.htm" onload="IFrameLoad(this);"></iframe>

iframe{
width:100%;
border:0;
}

function IFrameLoad(Dieses) {
Dieses.style.height =0;
Dieses.style.height = Dieses.contentWindow.document.body.scrollHeight;
}


Mit dem müden Trick erst mit Null eine alte Höhe zu neutralisieren funktioniert die Anpassung im IE. Angeblich auch in FF, aber da offenbar längst nicht mehr

Keine Varianten die
.contentDocument.documentElement.scrollHeight
.contentWindow.document.body.offsetHeight;
.contentDocument.document.scrollHeight;

verquirlen funktionieren.
Aber Google und (offenbar etwas ältere) Treffer (derer genug) sind felsenfest davon überzeugt, dass es «auch» für Chrome (Chromium) .contentDocument.documentElement.scrollHeight heißen muss und 1000%ig funzt.

Tut es aber nicht. (Weils angeblich nicht durchgenormt wäre.) Fragmente dieser Syntax in JS per Alert unter Chromium ausgelöst sprechen Bände:
alert("Dieses = "+Dieses.contentDocument);
liefert ‹null› - also effektiv inexistent…
alert("Dieses = "+Dieses.contentWindow);
crasht.

Was also kann ich tun um den IFrame anzupassen? Und wenns machbar wäre bleibe ich gerne bei HTML, CSS, JS. Dinge wie JQuery möchte ich nicht auch noch lernen und verstehen müssen.

CN8
 
Dein Code kann alleine deshalb schon nicht funktionieren, da height ohne Angabe einer Einheit ungültig ist. Wenn das im IE funktioniert, dann dichtet der da px einfach hinzu.

Javascript:
iframeElement.style.height = `${iframeElement.contentDocument.documentElement.offsetHeight}px`

Alternativ innerhalb des iframes:
Javascript:
if (window.frameElement != undefined) {
  window.frameElement.style.height = document.body.offsetHeight;
}
finde ich persönlich aber unschön, da hier die Abhängigkeit in "falscher" Richtung hast.
 
Zuletzt bearbeitet:
Tja, die Einhheit. OK, überredet. Indes - es bricht ja vorher schon ab weil Chromium gar nicht erst bis dahin kommt.
Um zu lügen, ich habe da was kopiert und nicht weiter auf ein fehelndes +'px' geachtet {bei der 0 ja obsolet}. Ursprünlich war es mit dabei.

Jedenfalls - gut aufgepasst! :)

Wie auch immer, ich suche noch nach der Syntax die ein aktuelles Chromium auch versteht.
Es mit IF auszufiltern nützt ja nix zur Sache.

CN8
 
Beide dinge von mir müssten im Chrome funktionieren. Im Firefox geht es jedenfalls. Wenn du genau hinschaust, siehst du, dass es etwas anderes wie von dir ist. Das if ist nicht da um den Chrome auszuschließen, sondern um zu testen, ob das document innerhalb eines Frames geladen ist (daher ist der zweite Part ja auch "innerhalb des iframes"). Aber du sollst auch nicht beides nutzen, sondern entweder oder.
 
Das kapiere ich jetzt nicht.
Wenn etwas undefined ist… Falsch. Wenn etwas für Chromium udefined ist dann hilft es mir doch nichts wenn ich damit den Fall Chromium abhake. Ich brauch doch eine Rückgabe eines scrollHeight (evtl. offsetHight).
Bagbag schrieb:
Alternativ innerhalb des iframes:
Wie löse ich das denn aus; mir leuchte nicht wrcht ein, dass ein <script></script> innerhalb des Iframes ausgelöst werden kann. Auch in der function sehe ich keinen Nutzen.
Wohin damit also?

CN8
 
1. Iframes sind böse. Dieses Gesetz gilt seit ca. 10 Jahren.
2. selfhtml.org
 
Und ich wollte doch nur das noch bösere FrameSet durch was Moderneres ersetzen 😇


Nun denn; wenn ich keine Datenbank (also so was wie final WordPress) einspanne um so dynamisch vorhandene Pages, bescheiden: Seiten-Inhalte, in einem Rahmen auszutauschen - mit was denn dann?

Alles in eine Datei zu schreiben und Blöcke (DIVs wohl) über JS (wie oben onClick) mit Style, Display sichtbar und unsichtbar zu machen - das wollte ich nicht um (A) eine große Datei {alle Inhalte auf einmal} zu vermeiden und (B) einfach auch mal um des Prinzips Nachzuladen Willen.

CN8


PS: von selfhtml wurde ich von denen selbst gründlich geheilt. Bekomme ich Google-Treffer und schaue sie durch finde ich praktisch nie dasjenige Detail das ich suche.
 
cumulonimbus8 schrieb:
Wenn etwas undefined ist… Falsch. Wenn etwas für Chromium udefined ist dann hilft es mir doch nichts wenn ich damit den Fall Chromium abhake. Ich brauch doch eine Rückgabe eines scrollHeight (evtl. offsetHight).
Was davon ist denn in Chromium undefined? Hast du überhaupt ausprobiert, was ich dir da gegeben haben? Auch wenn ich mir sicher war, dass es auch im Chrome funktionieren wird (da es im Firefox klappt), habe ich es jetzt trotzdem mal dort versucht... funktioniert.

cumulonimbus8 schrieb:
Wie löse ich das denn aus; mir leuchte nicht wrcht ein, dass ein <script></script> innerhalb des Iframes ausgelöst werden kann. Auch in der function sehe ich keinen Nutzen.
Wohin damit also?
In die Datei, die du nachladen willst. Warum sollte da ein Skript nicht ausgeführt werden?
 

Ähnliche Themen

Antworten
2
Aufrufe
1.410
Zurück
Oben