Używanie CSS do wpływania na styl div wewnątrz iframe

Czy można zmienić style div, który znajduje się w ramce iframe na stronie, używając tylko CSS?

Potrzebujesz JavaScript. Jest to to samo, co robienie tego na stronie nadrzędnej, z tym że musisz poprzedzić komendę JavaScript nazwą iframe.

Pamiętaj, że obowiązują te same zasady pochodzenia, więc możesz to zrobić tylko dla elementu iframe, który pochodzi z twojego serwera.

Używam frameworka Prototype , aby ułatwić:

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

lub

frame1.$('mydiv').addClassName('withborder')

W skrócie nie.

Nie możesz zastosować CSS do HTML ładowanego w ramce iframe, chyba że masz kontrolę nad stroną ładowaną w ramce iframe z powodu ograniczeń zasobów między domenami.

Tak. Spójrz na ten inny wątek, aby uzyskać szczegółowe informacje: Jak zastosować CSS do iframe?

var cssLink = document.createElement("link");
cssLink.href = "style.css";  
cssLink.rel = "stylesheet";  
cssLink.type = "text/css";  
frames['frame1'].document.body.appendChild(cssLink); 

Możesz pobrać zawartość iframepierwszego, a następnie jQueryjak zwykle użyć przeciwko nim selektorów.

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

Powodzenia!

Szybka odpowiedź brzmi: nie, przepraszam.

Nie jest możliwe użycie tylko CSS. Zasadniczo musisz mieć kontrolę nad treścią iframe, aby nadać jej styl. Istnieją metody wykorzystujące javascript lub wybrany przez Ciebie język internetowy (o którym trochę czytałem, ale nie znam się), aby dynamicznie wstawiać niektóre potrzebne style, ale potrzebujesz bezpośredniej kontroli nad zawartością iframe, którą brzmi jak ty nie masz.

Użyj Jquery i poczekaj, aż źródło zostanie załadowane. Oto jak osiągnąłem (Używając interwału kątowego, możesz użyć metody setInterval javascript):

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

prawdopodobnie nie tak, jak myślisz. iframe musiałby również <link>w pliku css. I nie możesz tego zrobić nawet z javascript, jeśli jest w innej domenie.

Najwyraźniej można to zrobić za pomocą jQuery:

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

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

Rodzaj hackerskiego sposobu robienia rzeczy jest taki, jak powiedział Eugene. Skończyło się na tym, że podążyłem za jego kodem i linkowałem do mojego niestandardowego CSS strony. Problemem było dla mnie to, że przy osi czasu Twittera musisz zrobić trochę bocznego śledzenia Twittera, aby zastąpić ich kod smidgen. Teraz mamy toczącą się oś czasu z naszym css do niej, IE Większa czcionka, odpowiednia wysokość linii i ukrywanie paska przewijania dla wysokości większych niż ich ograniczenia.

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

Wystarczy dodać to i wszystko działa dobrze:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Tak, jest to możliwe, choć uciążliwe. Musisz wydrukować / powtórzyć kod HTML strony w treści strony, a następnie zastosować funkcję zmiany reguły CSS. Korzystając z tych samych przykładów, które podano powyżej, zasadniczo użyłbyś metody parsowania, aby znaleźć div na stronie, a następnie zastosować CSS, a następnie ponownie wydrukować / wysłać echo użytkownikowi końcowemu. Nie potrzebuję tego, więc nie chcę zakodować tej funkcji w każdym elemencie CSS innej strony internetowej, żeby to zrobić.

Bibliografia:

• Drukowanie zawartości IFRAME
• Dostęp i drukowanie kodu źródłowego HTML za pomocą PHP lub JavaScript
• http://www.w3schools.com/js/js_htmldom_html.asp
• http://www.w3schools.com/js/js_htmldom_css.asp

Łącząc różne rozwiązania, to działało dla mnie.

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

Niemożliwe ze strony klienta. Zostanie zgłoszony błąd javascript „Błąd: odmowa dostępu do właściwości„ dokumentu ””, ponieważ element iframe nie jest częścią domeny. Jedynym rozwiązaniem jest pobranie strony z kodu po stronie serwera i zmiana wymaganego CSS.