Override-Körper-Stil für den Inhalt in ein iframe

Wie kann ich das hintergrund-Bild und Farbe für das body-element innerhalb einer iframe? Beachten Sie, dass die eingebettete body-element hat eine Klasse, und die iframe ist eine Seite, die Bestandteil meiner Website.

Dem Grund brauche ich das ist, dass meine Seite hat einen schwarzen hintergrund zugewiesen, um den Körper, und dann einen weißen hintergrund zugewiesen divs, die text enthalten. Ein WYSIWYG-editor verwendet eine iframe einbetten von Inhalten bei der Bearbeitung, aber es hat nicht die div, so dass der text sehr schwer zu Lesen.

Den Körper des iframe wenn im editor eine Klasse, die nicht verwendet wird, anderswo, also ich ' m vorausgesetzt, dies war es so Probleme wie dieses gelöst werden könnte. Allerdings, wenn ich die Stilarten class.body Sie nicht überschreiben die Stile angewendet Körper. Die seltsame Sache ist, dass die Stile erscheinen im Firebug, also ich habe keine Ahnung, was Los ist!!!

Dank

UPDATE - ich habe versucht @mikeq Lösung zum hinzufügen einer Formatvorlage für die Klasse, der Körper ist Klasse. Dies funktioniert nicht, wenn es in der main Seite das stylesheet, aber es funktioniert auch wenn Hinzugefügt mit Firebug. Ich gehe davon aus dies ist weil Firebug wird angewendet, um alle Elemente auf der Seite in der Erwägung, dass die CSS wird nicht angewendet, innerhalb von iframes. Bedeutet das, dass das hinzufügen der css nach der laden-Fenster mit JavaScript funktionieren würde?

  • Mögliche Duplikate von How to apply CSS iframe?
  • Es ist zwar nicht möglich, etwas zu berühren in ein iframe laden, die URL per Ajax in ein <div> kann manchmal ein workaround (falls gegeben CORS-Header zulassen, dass)... (und „Hygienisierung“ der geladenen Daten durch regexp auf den Weg. Ja, alle hacky...)
  • Sie können javascript verwenden, wenn Sie die Seite Domänen übereinstimmen, aber warum nicht einfach einen style-block in Ihre innere Seite ist HTML überschreiben Sie die gewünschten Farben geändert? Fügen Sie einfach mehr Selektoren in Ihrer überschreiben oder verwenden wichtig! wenn alle Stricke reißen, zu überschreiben, Farbe Stile, die Sie wollen nur auf dieser einen Seite...
InformationsquelleAutor jd6699 | 2011-06-27
  1. 97

    Einem iframe ist ein "Loch" in der Seite zeigt, dass eine andere web-Seite innerhalb der it. Der Inhalt des iFrames ist nicht in irgendeiner form Teil Ihrer übergeordneten Seite.

    Wie andere bereits gesagt haben, sind Ihre Optionen:

    • geben Sie der Datei, die geladen wird, in den iframe die notwendigen CSS -
    • wenn die Datei in der iframe ist aus der gleichen Domäne wie Ihre Eltern, dann Sie Zugriff auf das DOM des Dokuments im iframe von den Eltern.
    InformationsquelleAutor DA.
  2. 238

    Der unten funktioniert nur, wenn der iframe-Inhalt wird aus dem gleichen übergeordneten Domäne.

    Folgendes jquery-Skript funktioniert für mich. Getestet auf Chrome und IE8. Das innere iframe verweist auf eine Seite, die auf der gleichen Domäne wie die übergeordnete Seite.

    In diesem speziellen Fall, ich bin versteckt ein element mit einer bestimmten Klasse in das innere iframe.

    Im Grunde, Sie fügen Sie einfach ein 'style' - element, um den 'Kopf' des inneren iframe.

    $('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});
    • Vielen Dank, tolle Idee
    • machst du Witze das ist supper , u, markieren Sie diese als beantwortet.
    • Funktioniert nur, wenn der iFrame-Inhalt wird aus dem gleichen übergeordneten Domäne.
    • Können Sie die Javascript-alternative (ohne Jquery) ?
    • Hier der code ohne die Notwendigkeit von jQuery: jsfiddle.net/9g9wkpon, Sie müssen nur wissen, dass die Bindestrich-CSS-Eigenschaften werden in camelCase geschrieben in JavaScript, wie in meinem Beispiel. 🙂
    • jquery.js?ver=1.12.4:2 nicht Erfasste DOMException: Fehler beim Lesen der 'contentDocument' Eigenschaft von 'HTMLIFrameElement': Blockiert ein Rahmen mit Herkunft "xxxxxxxxx.com" Zugriff auf eine cross-origin-Rahmen.
    • als jeremy Staaten, dies funktioniert nur, wenn die iframe-Seite wird von dem gleichen server wie die übergeordnete Seite...was in der Regel bedeutet Sie brauchen nicht die Mühe mit javascript sowieso...fügen Sie einfach die CSS auf der anderen Seite in der f irst-Platz.
    • Sie nicht sogar brauchen, um die Javascript verwenden. Ändern Sie einfach die Seite, die im iFrame und setzen der CSS gibt.
    • um besser zu verstehen, Lesen Sie die folgenden Artikel bilden MDN, der erklärt, was CORS (Cross-Origin Resource Sharing ) ist. mzl.la/2E4ehEX ich hoffe, es hilft!
    • Macht ein iframe mit einer eingebetteten pdf-Datei aus der gleichen Domäne qualifizieren ? <iframe type="application/pdf" src="mydomain/resources/file.pdf"></iframe>

    InformationsquelleAutor SimpleSam5
  3. 25

    Können Sie nicht ändern Sie den Stil einer Seite in einem iframe angezeigt, es sei denn, Sie haben direkten Zugang und daher Eigentum des Quell-html und/oder css-Dateien.

    Ist dies zu verhindern, XSS (Cross Site Scripting)

    • Was meinst du mit 'direkter Zugriff'? Die Seite im iframe ist von meiner Seite aus, alles ist eine Domäne.
    • Gut, dann müssen Sie ändern Sie die Quelldatei auf Ihrer Website (die Sie nicht ändern können Sie alle Inhalte in einem iframe) - also, wenn der iframe zeigt auf mysite.com/test.html dann wirst du ändern müssen test.html direkt...
    • Nicht? Unter den Bedingungen der OP, sagt Sie. Zum Beispiel, seine innere iframe-URL ist die gleiche wie seine Eltern-Website, so sollte er in der Lage sein, um den Zugriff auf die DOM-ok mit alle Versionen von javascript, die Sie mögen...
    • Grau Falsch. Sie können ändern, den Inhalt in einem iframe von der übergeordneten Seite, wenn es auf der gleichen domain, die sowohl mit JavaScript und CSS.
    InformationsquelleAutor Myles Gray
  4. 7

    Einer iframe hat einen weiteren Spielraum, so dass Sie nicht auf Stil oder ändern Sie Ihre Inhalte mit javascript.

    Es ist im Grunde "anderen Seite".

    Die einzige Sache, die Sie tun können, ist zu Bearbeiten Sie Ihre eigenen CSS, denn mit Ihrer globalen CSS-Sie können nicht alles tun.

    • Ja, Sie können, mit javascript. Hinweis: am besten funktioniert es mit dem iframe-URL und die Eltern-URL, welche die gleiche domain. Aber, ich glaube, Sie haben Recht auf den Hinweis, das kann nur getan werden mit CSS auf die Seite innerhalb des iframe.
    InformationsquelleAutor Alessandro Vendruscolo
  5. 6

    Überschreiben anderen Domäne iframe CSS

    Indem er einen Teil der SimpleSam5 Antwort, ich erreichte dies mit ein paar von Tawk chat iframes (Ihre Anpassung Schnittstelle ist gut, aber ich brauchte weitere Anpassungen).

    In diesem speziellen iframe, zeigt sich auf mobile Geräte, die ich brauchte, um zu verbergen das Standard-icon und Stelle eines meiner Hintergrundbilder. Ich habe die folgenden:

    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 nicht eigenen Tawk die domain und dieser arbeitete für mich, so können Sie dies auch tun, wenn es nicht aus dem gleichen übergeordneten Domäne (trotz Jeremy Beckers Kommentar auf Sam ' s Antwort).

    • Sollte funktionieren, werde es versuchen.
    • Ich vermute, das funktioniert nur, weil die Leute bei Tawk ausdrücklich erlaubte.
    InformationsquelleAutor CPHPython
  6. 3

    Dieser code verwendet Vanille JavaScript. Es schafft eine neue <style> element. Es wird der text-Inhalt des Elements als string mit der neuen CSS. Und hängt das element direkt an das iframe-Dokument auf den Kopf.

    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);
    • Blocked a frame with origin xxxxxxxxx from accessing a cross-origin frame. Ich fürchte, es wird nicht funktionieren
    InformationsquelleAutor jtheletter
  7. 1

    Wenn Sie die Kontrolle über die Seite mit dem iframe und die Seite des iFrames können Sie ein query-parameter an den iframe...

    Hier ein Beispiel zum hinzufügen einer Klasse zum iframe basierend auf, ob oder nicht der hosting-Website ist Mobil...

    Hinzufügen 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 );

    Inside 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");
}
    InformationsquelleAutor Ben
  8. 0

    Ich habe eine blog und ich sehr viel Mühe hatte, herauszufinden, wie man die Größe von meinem eingebetteten Kern. Post-manager ermöglicht es Ihnen, text zu schreiben, platzieren von Bildern und einbetten von HTML-code. Blog-layout ist responsive selbst. Es ist gebaut mit Wix. Allerdings eingebetteten HTML-Code nicht. Ich lese viel darüber, wie es unmöglich ist, um die Größe von Komponenten innerhalb des Körpers der generierten iFrames. So, hier ist mein Vorschlag:

    Wenn Sie nur eine Komponente in Ihrem iFrame, d.h. Ihren Kern, Sie können die Größe nur den Kern. Vergessen Sie den iFrame.

    Hatte ich Probleme mit der viewport-spezifische layouts an verschiedene user-agents, und das ist, was 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 ist, um wesentliche (oder Ihre Komponenten) css-basierend auf user-agent. Stellen Sie sicher, identifizieren Sie Ihre Komponente zunächst, bevor die query-Selektor. Fühlen Sie sich frei, um einen Blick zu nehmen, wie Reaktionsfähigkeit arbeiten.

    InformationsquelleAutor Victor R. Oliveira
  9. -4

    Vielleicht ist es jetzt geändert, aber benutzt habe ich ein separates stylesheet mit diesem element:

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

    erfolgreich Stil eingebetteten youtube-iframes...siehe die blog-Beiträge auf dieser Seite.

    • Während dieser Zusammenhang kann eine Antwort auf die Frage, ist es besser, die wesentlichen Teile der Antwort hier und den link zur Referenz. Link-nur Antworten können ungültig werden, wenn die verlinkten Seite ändert.
    • Dies gilt nur für das iFrame-element selbst - die Frage fragt speziell über die iFrame-Inhalte, die es derzeit nicht möglich, zu ändern über CSS allein.
    • was genau das ist, was passiert ist. Zerreißen Tims Antwort nutzlos.
    InformationsquelleAutor Tim Jackson
  10. -22

    geben dem Körper Ihres iframe-Seite eine ID (oder Klasse, wenn Sie es wünschen).

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

    dann auch in der iframe-Seite, weisen Sie einen hintergrund in CSS

    #myId {
    background-color: white;
}
    • vorausgesetzt, die Seite innerhalb des iFrame ist dein zu Bearbeiten
    • Das ist seltsam. Deine Lösung funktioniert bei mir, wenn ich es in die Seite mit firebug, aber funktioniert nicht, wenn Ihr in der Seite die normale css-Datei. Könnte dies ein Teil Ihres Kommentar '- vorausgesetzt, die Seite innerhalb des iFrame ist dein zu Bearbeiten"? Ich nicht verstehen, was Sie damit meinte. Dank
    • Ich meine, dass ist die Seite, die Sie laden in den iFrame von Ihrem Standort und unter Ihrer Kontrolle? oder ist es von einer externen Website, die Sie nicht Bearbeiten können, die Quelle zu enthalten, die id/Klasse.
    • Es ist von meiner Seite aus, aber, wie Ihre getan in der editor-es wird nicht leicht sein, Sie zu ändern, die Markierung nach oben gezogen wird, dass durch.
    • ps ich habe nicht bedeuten, fügen Sie die id="myId" zu Ihrer Startseite, sondern die Seite innerhalb des iFrame. So kann man gezielt den Körper des iFrame-Seite mit einem anderen Stil zu Ihrer Startseite. Sie sind auch Verweise auf die CSS-Datei in Ihre iFrame-Seiten sind auch nicht Sie. Sie benötigen, um die Behandlung der geladenen Seite in den iFrame als eine völlig unabhängige Seite. Wenn Sie die Last nur, dass die Seite in einem web-browser hat es den richtigen style?
    • Im nicht wirklich sicher, wo die 'page' ist wie der nicht die ganze Seite, die der editor verwendet. Danke für Eure Hilfe, ich denke ich verstehe, wie all dieses Zeug funktioniert noe.

    InformationsquelleAutor mikeq
Schreibe einen Kommentar