Utilizzo dei CSS per influire sullo stile div all'interno di iframe

È possibile cambiare gli stili di un div che risiede all'interno di un iframe sulla pagina usando solo CSS?

È necessario JavaScript. È lo stesso che farlo nella pagina principale, tranne per il fatto che è necessario aggiungere un prefisso al comando JavaScript con il nome dell'iframe.

Ricorda, si applica la stessa politica di origine, quindi puoi farlo solo su un elemento iframe che proviene dal tuo server.

Uso il framework Prototype per semplificare:

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

o

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

In breve no.

Non è possibile applicare CSS a HTML caricato in un iframe, a meno che non si abbia il controllo sulla pagina caricata in iframe a causa delle restrizioni delle risorse tra domini.

Sì. Dai un'occhiata a quest'altra discussione per i dettagli: come applicare CSS a iframe?

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

È possibile recuperare i contenuti di un iframeprimo e quindi utilizzare jQueryselettori contro di loro come al solito.

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

In bocca al lupo!

La risposta rapida è: no, scusa.

Non è possibile usare solo CSS. Fondamentalmente devi avere il controllo sul contenuto di iframe per dargli uno stile. Ci sono metodi che usano javascript o il tuo linguaggio web preferito (di cui ho letto un po ', ma non ho familiarità con me stesso) per inserire dinamicamente alcuni stili necessari, ma avresti bisogno di un controllo diretto sul contenuto iframe, che suona come non hai.

Usa Jquery e attendi il caricamento della fonte, ecco come ho raggiunto (Intervallo angolare usato, puoi usare il metodo javascript setInterval):

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

probabilmente non è il modo in cui stai pensando. l'iframe dovrebbe trovarsi anche <link>nel file css. E non puoi farlo nemmeno con JavaScript se si trova su un dominio diverso.

Apparentemente può essere fatto tramite jQuery:

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

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

Una sorta di hack-ish di fare le cose è come ha detto Eugene. Ho finito per seguire il suo codice e il collegamento al mio CSS personalizzato per la pagina. Il problema per me era che, con una sequenza temporale di Twitter, devi fare un po 'di elusione di Twitter per sovrascrivere il loro codice come un smidgen. Ora abbiamo una linea temporale mobile con i nostri CSS, font IE più grande, altezza della linea corretta e rendendo la barra di scorrimento nascosta per altezze superiori ai loro limiti.

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

Basta aggiungere questo e tutto funziona bene:

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

Sì, è possibile anche se ingombrante. Dovresti stampare / fare eco al codice HTML della pagina nel corpo della tua pagina, quindi applicare una funzione di modifica delle regole CSS. Usando gli stessi esempi sopra riportati, useresti essenzialmente un metodo di analisi per trovare i div nella pagina, quindi applicare il CSS ad esso e quindi ristampare / riecheggiarlo per l'utente finale. Non ne ho bisogno, quindi non voglio codificare quella funzione in ogni elemento nel CSS di un'altra pagina Web solo per rispondere.

Riferimenti:

• Stampa del contenuto di IFRAME
• Accesso e stampa del codice sorgente HTML tramite PHP o JavaScript
• http://www.w3schools.com/js/js_htmldom_html.asp
• http://www.w3schools.com/js/js_htmldom_css.asp

Combinando le diverse soluzioni, questo è ciò che ha funzionato per me.

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

Non possibile dal lato client. Verrà generato un errore javascript "Errore: autorizzazione negata per accedere al" documento "di proprietà poiché l'iframe non fa parte di Domaine. L'unica soluzione è recuperare la pagina dal codice lato server e modificare il CSS necessario.