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

Ist es möglich, Stile eines Divs, das sich in einem Iframe auf der Seite befindet, nur mit CSS zu ändern?

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

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.

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

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!

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

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

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.

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

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

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">

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:

• Drucken von Inhalten von IFRAME
• Zugreifen auf und Drucken von HTML-Quellcode mit PHP oder JavaScript
• http://www.w3schools.com/js/js_htmldom_html.asp
• http://www.w3schools.com/js/js_htmldom_css.asp

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

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.