Verwenden von CSS, um den Div-Stil innerhalb des Iframes zu beeinflussen

Antworten:

117

Sie benötigen JavaScript. Dies ist dasselbe wie auf der übergeordneten Seite, außer dass Sie Ihrem JavaScript-Befehl den Namen des Iframes voranstellen müssen.

Denken Sie daran, dass dieselbe Ursprungsrichtlinie gilt. Sie können dies also nur für ein Iframe-Element tun, das von Ihrem eigenen Server stammt.

Ich verwende das Prototype- Framework, um es einfacher zu machen:

frame1.$('mydiv').style.border = '1px solid #000000'

oder

frame1.$('mydiv').addClassName('withborder')
Diodeus - James MacFarlane
quelle
2
siehe meine diese Frage ist ähnlich stackoverflow.com/questions/1962707/… aber können wir den Stil nicht ändern, wenn der Frame von einem anderen Server stammt?
Jitendra Vyas
16
Das ist richtig. Der Iframe-Inhalt unterliegt der Richtlinie für dieselbe Domain. Wenn es von Ihrer Domain stammt, können Sie es steuern. Wenn nicht, sind Sie gesperrt. Dies verhindert alle Arten von Iframe-basierten Seitenentführungen.
Diodeus - James MacFarlane
2
Nicht gerade eine "Nur CSS" -Lösung, aber gut genug für mich. +1
Nicu Surdu
2
Dies ist kein CSS.
Stramin
103

Kurz gesagt, nein.

Sie können CSS nicht auf HTML anwenden, das in einen Iframe geladen wird, es sei denn, Sie haben aufgrund domänenübergreifender Ressourcenbeschränkungen die Kontrolle über die in den Iframe geladene Seite.

mmattax
quelle
55
Dies ist wahr, aber helfen Sie den Menschen nicht wirklich, ein Beispiel dafür zu geben
Simon Dragsbæk
kommt das erst 2018? Ich erinnere mich, dass ich den Stil von iframe von außen konfiguriert habe. Ich habe versucht, CSS auf Iframe anzuwenden, die per Skript gerendert wurden, aber es funktioniert immer noch nicht.l
Võ Minh
46

Ja. Schauen Sie sich diesen anderen Thread für Details an: Wie wende ich CSS auf iframe an?

var cssLink = document.createElement("link");
cssLink.href = "style.css";  
cssLink.rel = "stylesheet";  
cssLink.type = "text/css";  
frames['frame1'].document.body.appendChild(cssLink); 
Eugene Rosenfeld
quelle
4
ist frame1 die id des iframes ??
Toni Michel Caubet
5
Ja, Frame1 ist die ID des Iframes.
Eugene Rosenfeld
3
Dies ist kein CSS.
Stramin
4
Dies können wir nicht tun, wenn wir eine andere Domain in iframe laden.
Sunith Saga
frame1ist der Name des
Iframes
14

Sie können den Inhalt eines iframezuerst abrufen und dann jQuerywie gewohnt Selektoren dagegen verwenden.

$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")

$("#iframe-id").contents().find("img").addClass("fancy-zoom")

$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });

Viel Glück!

Riyaz Hameed
quelle
11
funktioniert nicht: Nicht erfasst DOMException: Fehler beim Lesen der Eigenschaft 'contentDocument' aus 'HTMLIFrameElement': Blockiert einen Frame mit dem Ursprung " HOST " für den Zugriff auf einen Cross-Origin-Frame.
Tubbo
@tubbo, in Ihrem Fall können Sie keine nicht autorisierten Sites einbetten, die an XSS gehindert sind. Dies ist nur für diejenigen, die nach ihren eigenen Problemen suchen, nicht für Hacker: p
Riyaz Hameed
10

Die schnelle Antwort lautet: Nein, sorry.

Es ist nicht möglich, nur CSS zu verwenden. Grundsätzlich müssen Sie die Kontrolle über den Iframe-Inhalt haben, um ihn zu formatieren. Es gibt Methoden, die Javascript oder die Web-Sprache Ihrer Wahl verwenden (über die ich ein wenig gelesen habe, die ich aber nicht kenne), um einige benötigte Stile dynamisch einzufügen. Sie benötigen jedoch eine direkte Kontrolle über den Iframe-Inhalt, der sich anhört wie du nicht hast.

Justin Lucente
quelle
8

Verwenden Sie Jquery und warten Sie, bis die Quelle geladen ist. So habe ich es erreicht (Verwendetes Winkelintervall, Sie können die Javascript-Methode setInterval verwenden):

var addCssToIframe = function() {
    if ($('#myIframe').contents().find("head") != undefined) {
        $('#myIframe')
                .contents()
                .find("head")
                .append(
                        '<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
        $interval.cancel(addCssInterval);
    }
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);
Priyank Gupta
quelle
1
Warum verwendest du kein iframe geladenes Ereignis?
ProllyGeek
3

wahrscheinlich nicht so, wie du denkst. Der Iframe müsste auch <link>in der CSS-Datei enthalten sein. UND Sie können es nicht einmal mit Javascript tun, wenn es sich auf einer anderen Domain befindet.

Al W.
quelle
Können Sie möglicherweise ein Beispiel geben, wie dies getan werden kann? Meinst du so etwas wie <iframe src="/source" link=css-stylesheet:"/css.css">?
Ameise
3

Anscheinend kann es über jQuery gemacht werden:

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

https://stackoverflow.com/a/13959836/1625795

Adamj
quelle
3
Sie können dies aufgrund der gleichen Ursprungsrichtlinie im Chrome-Browser nicht mehr verwenden. Die Fehlermeldung:Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin **** from accessing a cross-origin frame.
Mohammad AlBanna
@adamj, Können wir das überschreibende Stylesheet des iframe-Elements ändern? Wenn ja, fügen Sie bitte ein Skript hinzu.
Super Model
2

Eine Art hack-ish Art, Dinge zu tun, ist wie Eugene sagte. Am Ende folgte ich seinem Code und verlinkt auf mein benutzerdefiniertes CSS für die Seite. Das Problem für mich war, dass man mit einer Twitter-Timeline ein bisschen aus Twitter ausweichen muss, um ihren Code ein wenig zu überschreiben. Jetzt haben wir eine fortlaufende Zeitleiste mit unserem CSS, der größeren Schriftart IE, der richtigen Zeilenhöhe und dem Ausblenden der Bildlaufleiste für Höhen, die größer als ihre Grenzen sind.

var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary
Cole Busby
quelle
1

Fügen Sie einfach dies hinzu und alles funktioniert gut:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
Wahab Ahmed
quelle
Ich bin mir nicht sicher, ob dies die richtige Antwort auf die gegebene Frage ist, aber es war eine großartige Lösung, das Google-Formular an die Breite des Geräts anzupassen. Vielen Dank!
Shiftyscales
0

Ja, es ist möglich, obwohl umständlich. Sie müssten den HTML-Code der Seite in den Hauptteil Ihrer Seite drucken / wiedergeben und dann eine CSS-Regeländerungsfunktion anwenden. Anhand der oben angegebenen Beispiele würden Sie im Wesentlichen eine Analysemethode verwenden, um die Divs auf der Seite zu finden, das CSS darauf anzuwenden und es dann erneut zu drucken / an den Endbenutzer weiterzuleiten. Ich brauche das nicht, also möchte ich diese Funktion nicht in jedes Element im CSS einer anderen Webseite codieren, nur um sie zu beantworten.

Verweise:

eric wiedemann
quelle
In der Frage wird speziell gefragt, ob nur CSS verwendet werden soll. In diesem Sinne ist Ihre Antwort falsch.
Serj Sagan
Dies ist kein CSS.
Stramin
0

Die Kombination der verschiedenen Lösungen hat bei mir funktioniert.

$(document).ready(function () {
    $('iframe').on('load', function() {
        $("iframe").contents().find("#back-link").css("display", "none");
    }); 
});
Rami Alloush
quelle
-1

Vom Client aus nicht möglich. Es wird ein Javascript-Fehler "Fehler: Berechtigung für Zugriff auf Eigenschaft" Dokument "verweigert" ausgelöst, da der Iframe nicht Teil Ihrer Domäne ist. Die einzige Lösung besteht darin, die Seite aus dem serverseitigen Code abzurufen und das erforderliche CSS zu ändern.

Chdid
quelle
2
Diese Antwort ist inhaltlich korrekt, bezieht sich jedoch auf JavaScript, während sich die Frage auf CSS bezieht. Die Antwort könnte sein, dass Sie JavaScript verwenden müssen, aber das sagen Sie nicht. Die Antwort geht auch davon aus, dass der Inhalt im iFrame aus einer anderen Domäne stammt, was nicht immer der Fall ist. Schließlich variiert die genaue Meldung von Browser zu Browser.
pwdst