Utilisation de CSS pour modifier le style d'un div dans un iframe

Question

Est-il possible de modifier les styles d'une division qui se trouve à l'intérieur d'un iframe sur la page en utilisant uniquement le CSS ?

Answer 1

Vous avez besoin de JavaScript. C'est la même chose que de le faire dans la page parent, sauf que vous devez faire précéder votre commande JavaScript du nom de l'iframe.

N'oubliez pas que la même politique d'origine s'applique, de sorte que vous ne pouvez faire cela qu'à un élément iframe provenant de votre propre serveur.

J'utilise le Prototype pour le rendre plus facile :

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

ou

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

Answer 2

En bref, non. Vous ne pouvez pas appliquer de CSS à du HTML chargé dans une iframe, à moins que vous n'ayez le contrôle de la page chargée dans l'iframe.

Answer 3

Oui. Jetez un coup d'œil à cet autre fil pour plus de détails : Comment appliquer le CSS à iFrame ?

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

Answer 4

La réponse rapide est : Non, désolé.

Ce n'est pas possible en utilisant uniquement les CSS. Vous devez en fait contrôler le contenu de l'iframe pour pouvoir le styliser. Il existe des méthodes utilisant javascript ou le langage web de votre choix (que j'ai lu un peu, mais avec lequel je ne suis pas très familier) pour insérer certains styles nécessaires de manière dynamique, mais vous auriez besoin d'un contrôle direct sur le contenu de l'iframe, ce que vous ne semblez pas avoir.

Answer 5

Utilisez Jquery et attendez que la source soit chargée, C'est ainsi que j'ai réalisé (en utilisant l'intervalle angulaire, vous pouvez utiliser la méthode 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);