it-swarm.com.de

Überschreiben Sie den Körperstil für den Inhalt in einem Iframe

Wie kann ich das Hintergrundbild und die Farbe eines Körperelements in einer iframe steuern? Beachten Sie, dass das eingebettete body-Element über eine Klasse verfügt und die iframe von einer Seite ist, die Teil meiner Website ist. 

Der Grund, warum ich dies brauche, ist, dass meiner Site ein schwarzer Hintergrund für den Körper und dann ein weißer Hintergrund für divs mit Text zugewiesen wurde. Ein WYSIWYG-Editor verwendet eine iframe zum Einbetten von Inhalt während der Bearbeitung, enthält jedoch nicht das div, daher ist der Text sehr schwer zu lesen. 

Der Körper der iframe hat im Editor eine Klasse, die nirgendwo anders verwendet wird. Ich gehe also davon aus, dass dies dort abgelegt wurde, damit Probleme wie diese gelöst werden konnten. Wenn ich Stile auf class.body anwende, überschreiben sie jedoch nicht die auf den Körper angewendeten Stile. 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 dem Stylesheet der Hauptseite hinzugefügt wird, aber es funktioniert, wenn es mit Firebug hinzugefügt wird. Ich gehe davon aus, dass Firebug auf alle Elemente der Seite angewendet wird, während das CSS nicht in iframes angewendet wird. Bedeutet dies, dass das Hinzufügen der CSS nach dem Laden des Fensters mit JavaScript funktionieren würde? 

119
jd6699

Ein iframe ist eine "Lücke" auf Ihrer Seite, in der eine weitere Webseite angezeigt wird. Der Inhalt des Iframes ist in keiner Form oder Form eines Teils Ihrer übergeordneten Seite.

Wie von anderen angegeben, sind Ihre Optionen:

  • 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 über das übergeordnete Element auf das DOM des Dokuments im iframe zugreifen.
92
DA.

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.

Im Grunde hängen Sie einfach ein 'style'-Element an den' head 'des inneren iframe an.

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});
224
SimpleSam5

Sie können den Stil einer in einem iframe angezeigten Seite nur ändern, wenn Sie über direct-Zugriff verfügen und daher Eigentümer der Quell-HTML- und/oder -Css-Dateien sind.

Dies ist zu stoppen XSS (Cross Site Scripting)

24
Myles Gray

Eine iframe hat einen anderen Bereich, so dass Sie nicht auf sie zugreifen können, um ihren Inhalt mit Javascript zu formatieren oder zu ändern.

Es ist im Grunde "eine andere Seite".

Sie können nur ein eigenes CSS bearbeiten, da Sie mit Ihrem globalen CSS nichts tun können.

Überschreiben Sie eine andere Domäneiframe CSS

Durch die Verwendung von SimpleSam5s Antwort habe ich dies mit ein paar Chat-Frames von Tawk erreicht (ihre Anpassungsoberfläche ist in Ordnung, aber ich brauchte weitere Anpassungen).

In diesem speziellen iFrame, der auf mobilen Geräten angezeigt wird, musste ich das Standardsymbol ausblenden und eines meiner Hintergrundbilder einfügen. 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-Domäne, und dies hat für mich funktioniert, daher können Sie dies auch tun, wenn sie nicht von derselben übergeordneten Domäne stammt (trotz Kommentar von Jeremy Becker zu Sam's Antwort).

5
CPHPython

Dieser Code verwendet Vanilla JavaScript. Es erstellt ein neues <style> Element. Es legt den Textinhalt dieses Elements als Zeichenfolge fest, 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);
2
jtheletter

Wenn Sie die Seite, auf der der iframe gehostet wird, und die Seite des iframe steuern können, können Sie dem iframe einen Abfrageparameter übergeben ...

Hier ein Beispiel, um dem iframe eine Klasse hinzuzufügen, je nachdem, ob die Hosting-Site mobil ist oder nicht.

IFrame hinzufügen:

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

Innerhalb von 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");
}
1
Ben

Ich habe ein Blog und ich hatte Mühe, herauszufinden, wie ich meine eingebettete Gist skalieren kann. Mit Post Manager können Sie nur Text schreiben, Bilder platzieren und HTML-Code einbetten. Blog-Layout ist selbst ansprechend. Es ist mit Wix gebaut. Eingebettetes HTML ist dies jedoch nicht. Ich habe viel darüber gelesen, dass es unmöglich ist, die Größe von Komponenten im Körper generierter iFrames zu ändern. Also hier mein Vorschlag:

Wenn sich nur eine Komponente in Ihrem iFrame befindet, d. H. Ihre Gist, können Sie nur die Gist in der Größe ändern. Vergiss den iFrame.

Ich hatte Probleme mit dem Ansichtsfenster, bestimmte 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 Ihre Komponente zuerst identifizieren, bevor Sie sie auf die Abfrageauswahl anwenden. Fühlen Sie sich frei, wie die Reaktionsfähigkeit funktioniert

Hoffe das hilft jemand anderem;)

prost

0