Überschreiben Sie den Body-Stil für Inhalte in einem Iframe

165

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 iframeeine 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 iframeWhen 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.bodyanwende, ü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?

jd6699
quelle
1
Mögliches Duplikat von Wie wende ich CSS auf iframe an?
2540625
Während es nicht möglich ist, irgendetwas in einem Iframe zu berühren, kann das Laden dieser URL pro Ajax in eine <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 ...)
Frank Nocke
Sie können Javascript verwenden, wenn die Seitendomänen übereinstimmen. Warum aber nicht einfach einen Stilblock in den HTML-Code Ihrer inneren Seite einfügen, um die Farben zu überschreiben, die geändert werden sollen? Fügen Sie einfach weitere Selektoren zu Ihrem Override hinzu oder verwenden Sie wichtig! Wenn alles andere fehlschlägt, überschreiben Sie alle gewünschten Farbstile nur auf dieser einen Seite ...
OG Sean

Antworten:

111

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:

  • Geben Sie der Datei, die in den Iframe geladen wird, das erforderliche CSS
  • Wenn die Datei im Iframe aus derselben Domäne stammt wie Ihr übergeordnetes Element, können Sie vom übergeordneten Element aus auf das DOM des Dokuments im Iframe zugreifen.
DA.
quelle
251

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.

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});
SimpleSam5
quelle
4
@ SimpleSam5 Können Sie die Javascript-Alternative bereitstellen (ohne Jquery zu verwenden)?
Kamalakannan J
1
@sincerekamal Hier ist der Code ohne jQuery: jsfiddle.net/9g9wkpon Sie müssen nur wissen, dass CSS-Eigenschaften mit Bindestrich in camelCase in JavaScript geschrieben sind, wie in meinem Beispiel. :)
Dennis98
2
jquery.js? ver = 1.12.4: 2 Nicht erfasste DOMException: Fehler beim Lesen der Eigenschaft 'contentDocument' aus 'HTMLIFrameElement': Blockiert einen Frame mit dem Ursprung " xxxxxxxxx.com " für den Zugriff auf einen originensübergreifenden Frame.
Alex Stanese
2
@AlexStanese, wie Jeremy feststellt, funktioniert dies nur, wenn die Iframe-Seite vom selben Server wie die übergeordnete Seite stammt. Dies bedeutet normalerweise, dass Sie sich sowieso nicht mit Javascript beschäftigen müssen. Fügen Sie einfach das CSS zur anderen Seite hinzu an erster Stelle.
DA.
@KamalakannanJ Sie müssen nicht einmal Javascript verwenden. Bearbeiten Sie einfach die Seite im iFrame und platzieren Sie das CSS dort.
DA.
25

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).

Myles Grey
quelle
Was meinst du mit "direktem Zugang"? Die Seite im Iframe stammt von meiner Site, es ist alles eine Domain.
jd6699
2
Dann müssen Sie die Quelldatei auf Ihrer Site ändern (Sie können keinen Inhalt in einem Iframe ändern). Wenn der Iframe also auf mysite.com/test.html zeigt, müssen Sie test.html direkt ändern. .
Myles Gray
1
Kann nicht? Unter den Bedingungen sagt das OP, dass Sie können. Zum Beispiel ist seine innere Iframe-URL dieselbe wie seine übergeordnete Site, so dass er mit jeder Art von Javascript, die Sie mögen, auf das DOM zugreifen kann ...
OG Sean
@Myles Grey Wrong. Sie können den Inhalt eines Iframes von der übergeordneten Seite aus ändern, wenn er sich in derselben Domäne befindet, sowohl mit JavaScript als auch mit CSS.
Kevin M
8

An iframehat 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.

Alessandro Vendruscolo
quelle
Ja, das können Sie mit Javascript. Beachten Sie, dass dies am besten mit der iframe-URL und der übergeordneten URL funktioniert, die dieselbe Domain verwenden. Aber ich denke, Sie haben Recht, wenn Sie darauf hinweisen, dass dies nur mit CSS auf der Seite im Iframe möglich ist.
OG Sean
8

Überschreiben Sie ein anderes Domain- iframe CSS

Durch 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:

Tawk_API.onLoad = function() {
// without a specific API, you may try a similar load function
// perhaps with a setTimeout to ensure the iframe's content is fully loaded
  $('#mtawkchat-minified-iframe-element').
    contents().find("head").append(
     $("<style type='text/css'>"+
       "#tawkchat-status-text-container {"+
         "background: url(https://example.net/img/my_mobile_bg.png) no-repeat center center blue;"+
         "background-size: 100%;"+
       "} "+
       "#tawkchat-status-icon {display:none} </style>")
   );
};

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).

CPHPython
quelle
18
Ich vermute, dass dies nur funktioniert, weil die Leute bei Tawk es ausdrücklich erlaubt haben.
Anwalt
@CPHPython Vielleicht kannst du mir helfen. Schauen Sie sich das an: stackoverflow.com/questions/60923168/…
Success Man
7

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.

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  'body {' +
  '  background-color: some-color;' +
  '  background-image: some-image;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);
2540625
quelle
7
Blocked a frame with origin xxxxxxxxx from accessing a cross-origin frame.Ich fürchte, es wird nicht funktionieren
Mike
1

Wenn 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:

var isMobile=$("mobile").length; //detect if page is mobile
var iFrameUrl ="https://myiframesite/?isMobile=" + isMobile; 

$(body).append("<div id='wrapper'><iframe src=''></iframe></div>");
$("#wrapper iframe").attr("src", iFrameUrl ); 

In iFrame:

//add mobile class if needed
var url = new URL(window.location.href);
var isMobile = url.searchParams.get("isMobile");
if(isMobile == "1") {
    $("body").addClass("mobile");
}
Ben
quelle
Vielleicht können Sie mir helfen. Schauen Sie sich das an: stackoverflow.com/questions/60923168/…
Success Man
0

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:

<script language="javascript" type="text/javascript" src="https://gist.github.com/roliveiravictor/447f994a82238247f83919e75e391c6f.js"></script>

<script language="javascript" type="text/javascript">

function windowSize() {
  let gist = document.querySelector('#gist92442763');

  let isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent)
    },
    BlackBerry: function() {
        return /BlackBerry/i.test(navigator.userAgent)
    },
    iOS: function() {
        return /iPhone|iPod/i.test(navigator.userAgent)
    },
    Opera: function() {
        return /Opera Mini/i.test(navigator.userAgent)
    },
    Windows: function() {
        return /IEMobile/i.test(navigator.userAgent) || /WPDesktop/i.test(navigator.userAgent)
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

  if(isMobile.any()) {
    gist.style.width = "36%";
    gist.style.WebkitOverflowScrolling = "touch"
    gist.style.position = "absolute"
  } else {
    gist.style.width = "auto !important";
  }
}

windowSize();

window.addEventListener('onresize', function() {
    windowSize();
});

</script>

<style type="text/css">

.gist-data {
  max-height: 300px;
}

.gist-meta {
  display: none;
}

</style>

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 .

Victor R. Oliveira
quelle
-3

Vielleicht hat es sich jetzt geändert, aber ich habe ein separates Stylesheet mit diesem Element verwendet:

.feedEkList iframe
{
max-width: 435px!important;
width: 435px!important;
height: 320px!important;
}

Um eingebettete YouTube-Iframes erfolgreich zu gestalten, lesen Sie die Blog-Beiträge auf dieser Seite .

Tim Jackson
quelle
4
Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert.
Shaiful Islam
4
Dies gilt nur für das iFrame-Element selbst - die Frage bezieht sich speziell auf den iFrame-Inhalt, den derzeit nur über CSS nicht geändert werden kann.
pwdst
@ShaifulIslam das ist genau das, was passiert ist. Rending Tims antworten nutzlos.
Alex Foxleigh
-23

Geben Sie dem Text Ihrer Iframe-Seite eine ID (oder eine Klasse, wenn Sie dies wünschen).

<html>
<head></head>
<body id="myId">
</body>
</html>

Weisen Sie dann auch auf der Seite des Iframes dem in CSS einen Hintergrund zu

#myId {
    background-color: white;
}
mikeq
quelle
Das ist komisch. Ihre Lösung funktioniert für mich, wenn ich sie mit Firebug zur Seite hinzufüge, aber nicht, wenn sie in der normalen CSS-Datei der Seite enthalten ist. Könnte dies Teil Ihres Kommentars sein, "vorausgesetzt, die Seite im iFrame muss von Ihnen bearbeitet werden"? Ich habe nicht verstanden, was du damit gemeint hast. Danke
jd6699
Ich meine damit, ist die Seite, die Sie von Ihrer Website in den iFrame laden, unter Ihrer Kontrolle? Oder können Sie die Quelle von einer externen Site aus nicht so bearbeiten, dass sie diese ID / Klasse enthält?
Mikeq
Es stammt von meiner Website, aber da es vom Editor erstellt wurde, ist es nicht einfach, die durchgezogene Markierung zu ändern.
jd6699
ps Ich wollte nicht die id = "myId" zu Ihrer Hauptseite hinzufügen, sondern zu der Seite im iFrame. Auf diese Weise können Sie den Hauptteil der iFrame-Seite mit einem anderen Stil als Ihre Hauptseite ausrichten. Sie verweisen auch auf die CSS-Datei auf Ihren iFrame-Seiten, nicht wahr? Sie müssen die in den iFrame geladene Seite als völlig unabhängige Seite behandeln. Wenn Sie nur diese Seite in einen Webbrowser laden, hat sie den richtigen Stil?
Mikeq
Ich bin mir nicht sicher, wo sich die 'Seite' befindet, da sie nicht die gesamte Seite ist, die der Editor verwendet. Vielen Dank für Ihre Hilfe, ich glaube ich verstehe, wie all dieses Zeug funktioniert.
jd6699