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:
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.
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
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.
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):
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.
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">?
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
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.
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.
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.
Antworten:
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:
oder
quelle
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.
quelle
Ja. Schauen Sie sich diesen anderen Thread für Details an: Wie wende ich CSS auf iframe an?
quelle
frame1
ist der Name desSie können den Inhalt eines
iframe
zuerst abrufen und dannjQuery
wie gewohnt Selektoren dagegen verwenden.Viel Glück!
quelle
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.
quelle
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):
quelle
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.quelle
<iframe src="/source" link=css-stylesheet:"/css.css">
?Anscheinend kann es über jQuery gemacht werden:
https://stackoverflow.com/a/13959836/1625795
quelle
Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin **** from accessing a cross-origin frame.
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.
quelle
Fügen Sie einfach dies hinzu und alles funktioniert gut:
quelle
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:
quelle
Die Kombination der verschiedenen Lösungen hat bei mir funktioniert.
quelle
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.
quelle