nicht angemeldet
Matthias Scharwies
Rolf B
Rolf B
Rolf B
Rolf B
Rolf B
Der Martin
Rolf B
Rolf B
Hallo HTML-Erleuchtete!
Nachdem alle meine Versuche, selbst eine HTML5-Lösung für eine Seite mit iframes zu bauen, gescheitert sind, habe ich noch einmal auf die allseits so beliebten Frame/Sets zurückgegriffen um darzustellen, was ich benötige. Der folgende Code funktioniert erstaunlicherweise sogar mit HTML5-Deklaration.
Wie kann ich ihn in iFrames umbauen und dbei das Problem der automatischen Höhenanpassung umgehen?
<!DOCTYPE html> <!-- PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> -->
<html lang="de">
<head>
<title>Framset</title>
</head>
<frameset cols="*,1280,*" border="0">
<frame name="off li" src="text/off.htm">
<frameset rows="2%, 20%, *, 2%">
<frame name= "off ob" src="text/off.htm">
<frame name= "intro" src="text/intro.htm">
<frameset cols="280, 1000">
<frame name="links" src="text/links.htm">
<frame name="texte" src="text/texte.htm">
</frameset>
<frame name= "off un" src="text/off.htm">
</frameset>
<frame name= "off re" src="text/off.htm">
</frameset>
Ziel der ganzen Bastelei ist eine Seite mit einem Intro-Block (Breite 100%, Scroll-Balken vermeiden), der sich in der Länge ändern kann, gefolgt von einem auf jeden Fall unterschiedlich langen Texte-Block (Breite 75%, rechts, Scrollbalken unumgänglich). Daneben soll links (25%) ein kleiner Logo-Block fix an seiner Stelle bleiben.
Dabei sollen Intro und Text optimal an den Bildschirm angepasst werden.
Falls iframes hier nicht funktioniert: Auch für Alternativen werde ich wohl etwas Starthilfe brauchen.
Lieben Dank im Voraus!
jQuietsch
Rolf B
Servus!
Nachdem alle meine Versuche, selbst eine HTML5-Lösung für eine Seite mit iframes zu bauen, gescheitert sind, habe ich noch einmal auf die allseits so beliebten Frame/Sets zurückgegriffen um darzustellen, was ich benötige. Der folgende Code funktioniert erstaunlicherweise sogar mit HTML5-Deklaration.
Ja, auch Google verwendet wohl frames für die Ergebnisse der Bildersuche.
Ziel der ganzen Bastelei ist eine Seite mit einem Intro-Block (Breite 100%, Scroll-Balken vermeiden), der sich in der Länge ändern kann, gefolgt von einem auf jeden Fall unterschiedlich langen Texte-Block (Breite 75%, rechts, Scrollbalken unumgänglich). Daneben soll links (25%) ein kleiner Logo-Block fix an seiner Stelle bleiben.
Dabei sollen Intro und Text optimal an den Bildschirm angepasst werden.
Falls iframes hier nicht funktioniert: Auch für Alternativen werde ich wohl etwas Starthilfe brauchen.
Meinst du eine Seite (dann brauchst du die iframes nicht, sondern kannst den Inhalt direkt in HTML-Elemente stecken) oder mehrere Seiten, die immer wieder auf die gleichen Elemente zurückgreifen?
Dann könntest Du mit PHP Seitenkopf (Header, Navigation) und Seitenfuß auslagern und einbinden:
Lieben Dank im Voraus!
jQuietsch
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
Google verwendet wohl frames für die Ergebnisse der Bildersuche.
kann ich mit einem kurzen Blick mit Chrome in die Entwicklerwerkzeuge nicht nachvollziehen.
Da Frames im HTML5 nicht mehr Teil des Standards sind, würde ich diese Behauptung bestenfalls als „veraltet“ klassifizieren.
Vielleicht gibt es einen Fallback auf Frames für Uraltbrowser? Keine Ahnung.
Rolf
Hallo Matthias,
ja - das Ganze soll als EINE SEITE in ein Intranet, ohne PHP oder andere Server-seitige Aktivitäten.
Wenn es bessere/zeitgemäßere Techniken gibt als (i)frames, bin ich für Starthilfe dankbar.
Grüße
jQ...h
Hallo jQuietsch,
Der folgende Code funktioniert erstaunlicherweise sogar mit HTML5-Deklaration.
Weil Browser gnädig und langmütig sind und mühsam versuchen, die 90er Jahre am Leben zu erhalten. Die Spec ist es nicht.
Elements in the following list are entirely obsolete, and must not be used by authors:
...
frame
frameset
noframes
Either use iframe and CSS instead, or use server-side includes to generate complete pages with the various invariant parts merged in.
(@Christian Kruse - funktionieren Beschreibungslisten mit mehreren dt nicht?)
Rolf
Hallo jQuietsch,
geht es um eine Seite? In dem Fall wärest Du mit Flexbox oder Grid gut beraten.
Oder geht es um mehrere Seiten, die dem gleichen Layout folgen sollen? Dann kann die Idee von Matthias helfen (PHP). Oder Server Side Includes, wenn Dir PHP zu komplex ist und dein Provider das zulässt.
Rolf
Hallo Rolf,
danke Dir für die Stichworte und werde mir mal Grid anschauen.
Einen allgemeinen Ansatz frame/sets in iframes umzuschreiben gibt es nicht?
Grüße
jQ...h
Hallo jQuietsch,
allgemeiner Ansatz
Doch, natürlich. Du baust eine Rahmenseite, die die ehemaligen Frameset-Inhalte als iframe einbindet und mit Grid oder Flexbox entsprechend die Breiten setzt. Unser Wiki schreibt etwas darüber
<frameset cols="*,1280,*" border="0">
<frame name="off li" src="text/off.htm">
<frameset rows="2%, 20%, *, 2%">
<frame name= "off ob" src="text/off.htm">
<frame name= "intro" src="text/intro.htm">
<frameset cols="280, 1000">
<frame name="links" src="text/links.htm">
<frame name="texte" src="text/texte.htm">
</frameset>
<frame name= "off un" src="text/off.htm">
</frameset>
<frame name= "off re" src="text/off.htm">
</frameset>
ersetzt man durch
<body>
<iframe id="off_li" src="text/off.htm">
<main>
<iframe name= "off_ob" src="text/off.htm">
<iframe name= "intro" src="text/intro.htm">
<div id="content">
<iframe id="links" src="text/links.htm">
<iframe id="texte" src="text/texte.htm">
</div>
<iframe id= "off_un" src="text/off.htm">
</main>
<iframe id="off_re" src="text/off.htm">
</body>
Die Breiten und Höhen kann man mit CSS beeinflussen, und für body und content-Div setzt Du eine Flexbox mit entsprechenden Breiten ein, die die Inhalte nebeneinander setzt.
Aber das sollte man nicht tun. Du hast 7 Zonen:
Was steht im off.htm drin? Irgendwas zum Füllen der Seite? Wenn das nur ein Bild ist, kann man das dem body als Hintergrund geben. Schwupps, sind 4 iframes weg.
Den Rest kann man mit Flexbox oder Grid erledigen. Aber zunächst ein paar Verständnisfragen.
Hast Du die Frameset-Seite irgendwo online? Ich kann mir das Scroll-Verhalten gerade schwer vorstellen.
Das Intro ist im Frameset 20% hoch, aber du schreibst, es kann variabel lang sein und du willst Scrollbars vermeiden. Das passt irgendwie nicht zusammen. Wenn der Inhalt des Intro die 20% überschreitet, brauchst Du dafür doch einen Scrollbar.
Wie stellst Du Dir vor, dass deine Seite auf einem Smartphone oder Tablet aussieht? Das nennt man responsives Layout, die Seite „antwortet“ auf die Abmessungen des Ausgabegerätes. Deine Idee mit fixiertem Logo könnte sich dann als fixe Idee erweisen. Mit @media-Abfragen und Grid kann man das Layout je nach Bildschirmgröße umpositionieren.
Rolf
Ooooh Rolf,
sorry für die verzögerte Antwort: Musste erst ein wenig in den Keller zur Selbstkasteiung ...
Die Idee die dämlichen OFFs durch Background zu ersetzen, ist für mich so etwas von peinlich naheliegend, dass ich meine Selbsteinschätzung als "einigermaßen geübter HTML-ler" erst mal auf "Dämlack" zurückstufe.
Ich habe inzwischen ein wenig zum Thema grid gestöbert und auch schon Ideen wie ich mein Layout damit umsetzen kann. Hauptsächlich unklar ist mir noch, wie ich eine htm-Seite in einen Container packe. <img src= ...> funktioniert. Wie mache ich das mit Text? Habe ich das gelöst, stelle ich gerne eine Sample-Site online.
Das Thema Scrollen wird sich mit den Grids (die ich hoffentlich richtig als nichts anderes als extrem flexible tables verstehe) vermutlich erledigen.
Herzlichen Dank für die Transkription frames/iframes! Auch die werde ich mal als Nachfolger meines Obsolet-Gebastels testen.
Die Seiten werden später im Intranet auf Arbeitsplatz-PCs, schlimmstenfalls auf Tablets aufgerufen. Die @media-Optionen werde ich also nur zu Übungszwecken implementieren.
Schöne Grüße und vielen Dank!
jQ...h
Hallo jQuietsch,
Die Seiten werden später im Intranet auf Arbeitsplatz-PCs, schlimmstenfalls auf Tablets aufgerufen.
Na gut, aber zumeist schadet eine Darstellung für kleine Bildschirme nicht. Zum Beispiel macht jemand auf dem Arbeitsplatz-PC das Fenster klein. Wär doch schön, wenn er dann ohne viel Aufwand von Dir eine brauchbare Alternativansicht bekommen könnte. Gelle?
Hauptsächlich unklar ist mir noch, wie ich eine htm-Seite in einen Container packe. Wie mache ich das mit Text?
Äh, Copy + Paste? Wieviele htm Dateien sind das denn, mit denen Du da hantierst? Und wo kommen ihre Inhalte her? Redaktionell erstellt? Durch ein Tool generiert? Das sind natürlich Rahmenbedingungen, von denen Du noch nichts erzählt hast.
Matthias hat mich auf einen Thread von Dir aus dem letzten Jahr hingewiesen. Da ging es um CSV Dateien, aus denen Inhalte erzeugt werden sollten. Ist das Projekt hier nun das Ergebnis davon? Oder war das eine andere Art von Seiten?
Rolf
Hallo Rolf,
nein, mit der CSV-Variante hat das diesmal nichts zu tun.
Ich hantiere mit einigen zig Seiten, die ich gerne jeweils separat gestalte. Dabei schreibe ich händisch html und beschränke mich auf wenige Tags (Bleiwüste klassisch).
Copy 'n Paste würde eine einzige Riesendatei produzieren, die nicht nur unübersichtlich, sondern auch Fehler-anfällig wäre. Eine falsche "<" und schon fehlt die Hälfte der Seite.
Wenn Du das Thema jQuery/CSV schon ansprichst: Wenn es diese Option in den Grids auch gibt, halte ich mir sie gerne offen.
Bleibt also die Frage: Wie bekomme ich ein lokale htm-Seite in einen Container?
jQ...h
Hallo,
ich verstehe immer noch nicht so ganz, was dein Problem ist.
Ich hantiere mit einigen zig Seiten, die ich gerne jeweils separat gestalte. Dabei schreibe ich händisch html und beschränke mich auf wenige Tags (Bleiwüste klassisch).
Das hört sich doch dann recht einfach an - und auch danach, dass man da noch vieles "aufhübschen" könnte.
Copy 'n Paste würde eine einzige Riesendatei produzieren, ...
Naja, eben mit allen Inhalten, die du auf einer Seite anzeigen willst. Eigentlich der Normalfall.
die nicht nur unübersichtlich, sondern auch Fehler-anfällig wäre. Eine falsche "<" und schon fehlt die Hälfte der Seite.
Ja sicher, die Fehlerquelle hat man immer.
Bleibt also die Frage: Wie bekomme ich ein lokale htm-Seite in einen Container?
Es heißt HTML, nicht htm. Und davon abgesehen ist dem bisher Gesagten kaum was hinzuzufügen. Schreib deine Seiteninhalte einfach in die passenden Containerelemente rein. Das ist eigentlich alles.
Ach ja, und achte darauf, dass du nicht ein komplettes HTML-Dokument reinkopierst (wie bei der Frame-Lösung), sondern nur den reinen Nutzinhalt.
Live long and pros healthy,
Martin
Hallo jQuietsch,
Ich hantiere mit einigen zig Seiten, die gerne jeweils separat gestalte.
"mach ich gerne so" ist kein Kriterium für gute Architektur ;)
Copy 'n Paste würde eine einzige Riesendatei produzieren,
So war's nicht gemeint. Wenn Du nur ganz wenig Seiten gehabt hättest, dann wäre der Inhalt aus einer alten Datei mit Copy+Paste in die neue übertragen worden, und du hättest statt - beispielsweise - 4 alten iframe-Komponenten 4 neue HTML-Dateien ohne iframes gemacht. Aber bei "einige zig" ist das nicht zielführend. Du würdest ja das Intro jedesmal neu machen. Wobei - das könnte man dann mit Server Side Include hinzuladen.
Wie bekomme ich ein lokale htm-Seite in einen Container.
Deswegen fragte ich ja nach den Grundlagen, auf denen Du aufbaust. Wo kommen die Inhalte her.
Wenn Du die einzelnen htm Dateien unverändert behalten willst: Mit iframe. Alles andere ist Arbeit. Die Frage ist dann immer: wer bezahlt es und wem nützt es.
Ich kann mir zwei Ansätze mit clientseitigem Script vorstellen.
Ansatz 1: dynamischer Umbau der vorhandenen Inhaltsseiten.
Sicherlich haben deine aktuellen, einige zig HTM Seiten ein halbwegs einheitliches Layout. Wenn nicht, könnte man das herstellen, so, dass außerhalb des eigentlichen Inhaltsteils alles gleich ist? Sie sind ja im Moment dazu da, in einen iframe geladen zu werden, und werden darum recht spartanisch sein.
Mal angenommen, das sähe so aus:
<!doctype html>
<html lang=de">
<head>
<title>Dings Dings Bums</title>
<link rel="stylesheet" href="site.css">
</head>
<body>
<h2>Dings Dings Bums</h2>
<p>Lorem Ipsum</p>
</body>
<!-- add magic here -->
</html>
Dann könnte ich mir vorstellen, dass man an der Stelle, wo ich die Magie markiert habe, ein Script einsetzt:
<script src="embed_to_frame.js"></script>
und dieses Script baut die Seite um. Es merkt sich den Inhalt des body (innerHTML), ersetzt den Body durch das HTML der Rahmenseite ersetzt und setzt in ein HTML Element der Rahmenseite den gemerkten Inhalt wieder ein. Dafür braucht man nicht einmal jQuery:
// embed_to_frame.js
let oldContent = document.body.innerHTML;
document.body.innerHTML = ".....<article id="placeholder"></article>.....";
document.getElementById("placeholder").innerHTML = oldContent;
</script>
Die Kunst ist natürlich der Aufbau des neuen Rahmen-HTML, aber das schreibt man einmal und dann ist gut. Das Script sollte ganz bewusst extern sein, damit man das HTML der Rahmenseite nur an einer Stelle hat.
Du kannst das HTML der Rahmenseite, statt es in einen String zu legen, auch per jQuery laden, dann musst Du das HTML nicht in einen langen Stringwurm packen und kannst es mit deinem Lieblings-HTML-Editor bearbeiten.
let oldContent = document.body.innerHTML;
$(document.body).load("seitenrahmen.html", function() {
$("#placeholder").html(oldContent);
});
Je nachdem, was in den Rahmen gepackt werden soll, könntest Du mit data-Attributen auf dem Body auch noch ein paar Parameter für das Script hinterlassen (Name der Logo-Datei, Name des Rahmen-HTML falls es davon verschiedene Varianten gibt, etc).
Ansatz 2: Der Rahmen lädt den Inhalt
Wenn Du bereit bist, die lokalen htm Dateien so umzugestalten, dass sie nur noch Bausteine sind, die an die passende Stelle inkludiert werden können: mit Server Side Includes oder einem serverseitigen Programm in PHP.
Oder mit clientseitigem Script, das mittels jQuery den Baustein holt und in den Container einsetzt.
<body>
<header>...intro...</header>
<main>
<aside>logo</aside>
<article id="placeholder">
</article>
</main>
<script>
let query = window.location.search;
// magic happens
$("#placeholder").load(partName)
</script>
</body>
Das setzt voraus, dass deine bestehenden Inhaltsseiten umgebaut sind, so dass sie nur noch das HTML Fragment enthalten, das in das article-Element eingesetzt werden muss. Das ist entweder Handarbeit, oder du kannst das schlau scripten. Keine Ahnung.
Die genannte Magie besteht darin, aus einem URL-Parameter wie ?part=audi_s8_rot den Namen einer Komponentendatei zu machen, z.B. audi_s8_rot.html. Das ist so schwer nicht, wenn man das URLSearchParams Objekt verwenden kann (was aber den Internet Explorer ausschließt). Andernfalls musst Du den Wert von search manuell zerlegen. Führendes Fragezeichen weg, am & Zeichen in Parameter zerlegen, jeden Parameter am = in Name und Wert zerlegen, den part-Parameter suchen. jQuery hilft Dir da nicht, das enthält nur die Umkehrung davon (.param() Funktion).
Auf diese Weise hättest Du eine Containerseite, die Du mit der URL http://example.org/showContent.html?part=foo1234 aufrufen kannst und die das im Parameter genannte Inhaltssegment nachlädt.
Rolf
Hallo Rolf!
Erst einmal "heftig den Hut!" ab vor dem geballten Know how, das Du hier präsentierst. Allein aufgrund der Tatsache, dass hier kein PHP oder andere Server-seitige Aktivitäten zur Verfügung stehen, kann ich mich auf die JS-Versionen beschränken.
Wenn grids nur mit sehr viel Aufwand mit externem Inhalt gefüllt werden können, fallen sie raus und ich werde zur (i)frame-Variante zurückgehen. Damit bekomme ich dann einigermaßen schnell ein erträgliches Ergebnis.
Aus purer Sympathie zu jQuery werde ich zu Übungszwecken auch Deinen Ansatz 2 angehen.
Die Display/Geräte-Anpassungen bleiben dann Sache für JavaScript und CSS.
Liebe Grüße und allerbesten Dank!!
Schönen Abend wünscht jQ...h
Hallo jQuietsch,
andere Server-seitige Aktivitäten
Was heißt denn das? Hast Du gar keinen Server und lädst die Dateien von file:///? In dem Fall kriegst Du Ärger mit dem Nachladen, weil der Browser das als CORS-Verletzung blocken wird.
Mit einem Webserver, der stumpf GET Requeste mit statischen Ressourcen bedienen kann, ist's aber ok.
Rolf