HTML iframe übernimmt kein CSS im Mutter-Dokument

McMoneysack91 · 24. März 2023

Liebe Freunde,

nachdem ich meine Websites mittels <? php include ...?> gebaut habe, möchte ich nun offline auch allerlei Bausteine in meine Seite einfügen. iframe scheint hierfür geeignet zu sein, ohne zu sehr in Scripting zu gehen etc.

Beispiel:

Ich habe eine .html Datei. Diese enthält im Grunde nur die Meta-Dateien, darunter auch einen Verweis auf das CSS (welches wiederum in einer separaten Datei ist).

Sprich ich habe hier folgendes vorliegen:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="style/format.css">
</head>
<body>

</body>
</html>

Jetzt möchte ich im Body gerne einen Baustein einfügen, welchen ich in einer separaten Datei im Ordner "architecture" ausgelagert habe.

die ausgelagerte content-box.html beinhaltet lediglich folgenden Inhalt:

<div class="content-box">Dies ist eine Box mit Inhalt</div>

Ich kriege mittels iframe tatsächlich den Inhalt angezeigt. Aber die CSS Styles werden leider nicht mit übernommen. Muss ich das irgendwo nochmal explizit verlinken? Beispielsweise in der ausgelagerten Content-Box Datei?

Sephe · 24. März 2023

Iframe ist quasi ein "Guckloch" auf eine andere Webseite.
CSS Stylesheets aufgerufenen Seite werden nicht auf Seiten in iFrames übernommen.
IFrame ist heutzutage bestenfalls noch aus kompatibilitätsgründen funktionsfähig und sollte nicht für neue Projekte verwendet werden.

Ich denke es wäre sinnvoll, wenn du uns einmal konkret sagst, worum es geht.

McMoneysack91 · 24. März 2023

Konkret möchte ich ausgelagerte HTML-Fragmente in ein großes Mutter-HTML Dokument laden, aber so, dass alle hineingeladenen Fragmente die CSS Vorgaben mit übernehmen.

Ich hatte schonmal einen Thread aufgemacht, wo es mir darum ging, ein einziges "Architektur-Verzeichnis" zu haben wo ich allerlei HTML-Bröckelchen in jeweils separaten Datein habe. Eine für den Header, eine für die Sidebox, eine für die Navigation, eine für die Adbox, eine für den Content, eine für den Footer etc.

Und jede Seite die ich dann erstellen würde, würde schlicht und ergreifend all diese Bröckelchen in sich hinein holen und als Ganzes darstellen.

Hintergrund: wenn ich z.B. 1000 Seiten habe, die alle gleich aufgebaut sind und ich möchte das Design oder den Inhalt eines Elements ändern, dann brauche ich das NUR in der einen einzigen Datei im Architektur-Ordner zu machen und alle 1000 Seiten ziehen sich das automatisch. Statt 1000 Seiten manuell zu bearbeiten.

In meiner Website mache ich das mittels PHP und der <? include> Funktion. Und das klappt 100% reibungslos und ich könnte glücklicher nicht sein. Aber das funktioniert nun mal nur online auf einem Server. Wenn ich das Spielchen offline einfach in einem Ordner auf meiner Festplatte durchspielen möchte, klappt das mit PHP schon mal gar nicht.

Und ich muss ehrlich sagen für so eine kleine Funktion finde ich das was so mancher bei Stackoverflow an Scripten geschrieben hat ein bisschen too much. Da wird gefühlt ein halbes Skyrim gecodet nur um so ein Snippet in die Seite zu bringen.

netzgestaltung · 24. März 2023

das kannst du mit PHP direkt erledigen.
schau dir die Globale Variable "$_SERVER" näher an, dann kannst du den aufgerufenen Pfad erfassen und mittels include die richtigen Broken.

savuti · 24. März 2023

Dann leg die css-Datei in root und lade die so in deine Seiten.

McMoneysack91 · 24. März 2023

netzgestaltung schrieb:
das kannst du mit PHP direkt erledigen.

Tue ich ja erfolgreich auf meinem Server. Meine gesamte Website arbeitet nonstop damit. Aber offline, wenn ich mit .php Dateien arbeite oder mit <? php include> arbeiten will kommt keine Reaktion wenn ich die Mutterdatei im Browser öffne.

savuti schrieb:
Dann leg die css-Datei in root und lade die so in deine Seiten.

Wo die Datei liegt ist doch eigentlich egal oder? Solange die Referenz dazu stimmt. Ob ich nun href="ORDNER/format.css" oder direkt href="format.css" ansteuere ist da doch egal. Aber sag mal wie du das exakt meinst, die CSS "in meine Seiten" zu laden?

Angenommen ich habe jetzt diesen einen kleinen Bröckel der da heißt sidebox.html und in dieser Datei sieht der code so aus

<div class="sidebox">Dies ist eine Sidebox</div>

Wo genau füge ich die Verlinkung zu CSS ein? einfach als Zeile dadrüber?

<link rel="stylesheet" href="../style/format.css">
<div class="sidebox">Dies ist eine Sidebox</div>

Oder ist die Verlinkung zur CSS Datei direkt im Div möglch?

<div class="sidebox" rel="stylesheet" href="../style/format.css">Dies ist eine Sidebox</div>

So?

netzgestaltung · 24. März 2023

ich hab mal ein einfaches Beispiel erstellt:
Beispiel:

PHP:

$parts = array('kontakt','portfolio');

if ( in_array($parts, $_SERVER['REQUEST_URI']) ) {
  include($_SERVER['REQUEST_URI'] . '.php');
}

dann brauchst du das CSS nicht nochmal aufrufen.

Wie CSS eingebaut wird, kannst du hier sehen: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden

thealex · 24. März 2023

McMoneysack91 schrieb:
Aber offline, wenn ich mit .php Dateien arbeite oder mit <? php include> arbeiten will kommt keine Reaktion wenn ich die Mutterdatei im Browser öffne.

Setz dir einen lokalen Webserver mit z.B. XAMPP auf und schon geht das auch offline auf deinem Rechner.

aronlad · 24. März 2023

thealex schrieb:
lokalen Webserver mit z.B. XAMPP auf

Ja nicht erst mit dem xampp Quatsch anfangen! Das macht hinten raus nur Probleme. Eine VM mit Webserver aufsetzen.

Bagbag · 24. März 2023

Oder podman/docker mit nem PHP Container.

Vergiss iframes. Das ist hierfür (heute) das falsche Werkzeug. Entweder die oben genannten Lösungen oder direkt auf ein UI Framework gehen.

McMoneysack91 · 24. März 2023

Bitte nicht falsch verstehen. Ich möchte nicht offline "testen" ums später hochzupacken, ich möchte offline ein fertiges Konstrukt bauen, welches in sich funktioniert und im lokalen Netzwerk von Leuten aufgerufen werden kann. Ohne VMs, Server etc.

Bin etwas geschockt, dass HTML so eine Banalität nicht nahtlos bietet. Ich kann kaum der einzige Mensch sein, der das Instrument benutzen möchte.

LencoX2 · 24. März 2023

HTML bietet sowas schon.aber iframe ist inhärent unsicher, weswegen alles über CSP Header con der hostenden Seite geblockt wird. Kann aber durch eigene CSP Header angepasst werden

netzgestaltung · 24. März 2023

HTML solte sowas garnicht bieten, deswegen war iframe auch eine Fehlkonstruktion aus der Not heraus.

HTML dient nur dazu zu beschreiben, was der inhalt semantisch bedeutet. "ich bin ein absatz" oder "ich bin eine überschrift" - deswegen ist alles weitere eben mit scripting zu lösen, weil HTML ist nicht dynamisch, es ist eine "Markup Language".

aronlad · 24. März 2023

McMoneysack91 schrieb:
Ohne VMs, Server etc.

So funktioniert das aber nun mal nicht...

BlubbsDE · 24. März 2023

McMoneysack91 schrieb:
Ich kann kaum der einzige Mensch sein, der das Instrument benutzen möchte.

Vielleicht doch. Und es wurde schon gesagt, iFrames sind seit dem letzten Jahrtausend, ok, vielleicht etwas später, tot.

netzgestaltung · 24. März 2023

also nur kurz zur einordnung.

iframes sind immer noch an der tagesordnung, zb in youtube embeds, maps-fenster oder andere gelegenheiten. allerdings gibts da einen haufen an dingen zu beachten(CORS, CSP, Dimensionen/Responsive, Controlling des Inhalts, CSS Stile) und daher gibt es JS-APIs mit denen die dynamisch gebaut werden. für iframes brauchst du in der echten welt mehr scripting als es für die php include Beispiele nötig ist.

Suche

HTML iframe übernimmt kein CSS im Mutter-Dokument

McMoneysack91

Gast

Sephe

Rear Admiral

McMoneysack91

Gast

netzgestaltung

Captain

savuti

Lt. Commander

McMoneysack91

Gast

netzgestaltung

Captain

thealex

Lt. Commander

aronlad

Banned

Bagbag

Commodore

McMoneysack91

Gast

LencoX2

Commander

netzgestaltung

Captain

aronlad

Banned

BlubbsDE

Fleet Admiral

netzgestaltung

Captain

Ähnliche Themen