Wie kann ich das Hintergrundbild und die Farbe eines Körperelements innerhalb eines steuern iframe
? Beachten Sie, dass das eingebettete Body-Element eine Klasse hat und iframe
eine Seite ist, die Teil meiner Site ist.
Der Grund, warum ich dies benötige, ist, dass meiner Site dem Körper ein schwarzer Hintergrund und dann Divs, die Text enthalten, ein weißer Hintergrund zugewiesen wird. Ein WYSIWYG-Editor verwendet ein iframe
, um Inhalte beim Bearbeiten einzubetten, enthält jedoch nicht das div, sodass der Text sehr schwer zu lesen ist.
Der Text des iframe
When im Editor enthält eine Klasse, die nirgendwo anders verwendet wird. Ich gehe also davon aus, dass diese dort abgelegt wurde, damit Probleme wie diese gelöst werden können. Wenn ich jedoch Stile class.body
anwende, überschreiben sie nicht die Stile, die auf den Körper angewendet werden. Das Seltsame ist, dass die Stile in Firebug erscheinen, also habe ich keine Ahnung, was los ist!
Vielen Dank
UPDATE - Ich habe @ mikeqs Lösung ausprobiert, der Klasse, die die Klasse des Körpers ist, einen Stil hinzuzufügen. Dies funktioniert nicht, wenn es zum Stylesheet der Hauptseite hinzugefügt wird, aber es funktioniert, wenn es mit Firebug hinzugefügt wird. Ich gehe davon aus, dass dies daran liegt, dass Firebug auf alle Elemente auf der Seite angewendet wird, während das CSS nicht in iframes angewendet wird. Bedeutet dies, dass das Hinzufügen des CSS nach dem Laden des Fensters mit JavaScript funktionieren würde?
quelle
<div>
Dose manchmal eine Problemumgehung sein (wenn der CORS-Header dies zulässt) ... (und die geladenen Daten durch Regexp auf dem "bereinigen" Weg. Ja, alle hacky ...)Antworten:
Ein Iframe ist ein "Loch" in Ihrer Seite, in dem eine andere Webseite angezeigt wird. Der Inhalt des Iframes hat keine Form oder keinen Teil Ihrer übergeordneten Seite.
Wie andere angegeben haben, haben Sie folgende Möglichkeiten:
quelle
Das Folgende funktioniert nur, wenn der Iframe-Inhalt aus derselben übergeordneten Domäne stammt.
Das folgende JQuery-Skript funktioniert für mich. Getestet auf Chrome und IE8. Der innere Iframe verweist auf eine Seite, die sich in derselben Domäne wie die übergeordnete Seite befindet.
In diesem speziellen Fall verstecke ich ein Element mit einer bestimmten Klasse im inneren Iframe.
Grundsätzlich fügen Sie einfach ein 'Stil'-Element an den' Kopf 'des inneren Iframes an.
quelle
Sie können den Stil einer in einem Iframe angezeigten Seite nur ändern, wenn Sie direkten Zugriff haben und daher Eigentümer der Quell-HTML- und / oder CSS-Dateien sind.
Dies dient zum Stoppen von XSS (Cross Site Scripting).
quelle
An
iframe
hat einen anderen Bereich, sodass Sie nicht darauf zugreifen können, um den Inhalt mit Javascript zu formatieren oder zu ändern.Es ist im Grunde "eine andere Seite".
Sie können nur das eigene CSS bearbeiten, da Sie mit Ihrem globalen CSS nichts tun können.
quelle
Überschreiben Sie ein anderes Domain-
iframe
CSSDurch die Verwendung eines Teils der Antwort von SimpleSam5 habe ich dies mit einigen Chat-Iframes von Tawk erreicht (die Anpassungsoberfläche ist in Ordnung, aber ich brauchte weitere Anpassungen).
In diesem speziellen Iframe, der auf Mobilgeräten angezeigt wird, musste ich das Standardsymbol ausblenden und eines meiner Hintergrundbilder platzieren. Ich habe folgendes gemacht:
Ich besitze keine Tawk-Domain und dies hat bei mir funktioniert. Sie können dies also auch dann tun, wenn es nicht von derselben übergeordneten Domain stammt (trotz Jeremy Beckers Kommentar zu Sams Antwort).
quelle
Dieser Code verwendet Vanille-JavaScript. Es entsteht ein neues
<style>
Element. Der Textinhalt dieses Elements wird als Zeichenfolge festgelegt, die das neue CSS enthält. Dieses Element wird direkt an den Kopf des Iframe-Dokuments angehängt.quelle
Blocked a frame with origin xxxxxxxxx from accessing a cross-origin frame.
Ich fürchte, es wird nicht funktionierenWenn Sie die Kontrolle über die Seite haben, auf der sich der Iframe befindet, und die Seite des Iframes, können Sie einen Abfrageparameter an den Iframe übergeben ...
Hier ist ein Beispiel zum Hinzufügen einer Klasse zum Iframe, basierend darauf, ob die Hosting-Site mobil ist oder nicht ...
Hinzufügen von iFrame:
In iFrame:
quelle
Ich habe einen Blog und hatte große Probleme, die Größe meines eingebetteten Kerns zu ändern. Mit dem Post-Manager können Sie nur Text schreiben, Bilder platzieren und HTML-Code einbetten. Das Blog-Layout reagiert selbst. Es ist mit Wix gebaut. Eingebettetes HTML ist dies jedoch nicht. Ich habe viel darüber gelesen, wie es unmöglich ist, die Größe von Komponenten innerhalb des Körpers generierter iFrames zu ändern. Also, hier ist mein Vorschlag:
Wenn Sie nur eine Komponente in Ihrem iFrame haben, dh Ihren Kern, können Sie nur die Größe des Kerns ändern. Vergiss den iFrame.
Ich hatte Probleme mit dem Ansichtsfenster und bestimmten Layouts für verschiedene Benutzeragenten. Dies hat mein Problem gelöst:
Die Logik besteht darin, gist (oder Ihre Komponente) css basierend auf dem Benutzeragenten festzulegen. Stellen Sie sicher, dass Sie zuerst Ihre Komponente identifizieren, bevor Sie sie auf die Abfrageselektion anwenden. Schauen Sie sich an, wie die Reaktionsfähigkeit funktioniert .
quelle
Vielleicht hat es sich jetzt geändert, aber ich habe ein separates Stylesheet mit diesem Element verwendet:
Um eingebettete YouTube-Iframes erfolgreich zu gestalten, lesen Sie die Blog-Beiträge auf dieser Seite .
quelle
Geben Sie dem Text Ihrer Iframe-Seite eine ID (oder eine Klasse, wenn Sie dies wünschen).
Weisen Sie dann auch auf der Seite des Iframes dem in CSS einen Hintergrund zu
quelle