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

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?

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.

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>"));
});

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

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.

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

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

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");
}

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 .

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 .

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;
}