Utiliser CSS pour affecter le style div à l'intérieur d'iframe

est-il possible de changer les styles d'une div qui réside à l'intérieur d'une iframe sur la page en utilisant CSS seulement?

202
demandé sur ascx 2009-02-25 00:46:45

11 réponses

vous avez besoin de JavaScript. C'est la même chose que de le faire dans la page mère, sauf que vous devez préfixer votre commande JavaScript avec le nom de l'iframe.

rappelez-vous, la même politique d'origine s'applique, donc vous ne pouvez faire cela qu'à un élément iframe qui vient de votre propre serveur.

j'utilise le Prototype framework pour le rendre plus facile:

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

ou

frame1.$('mydiv').addClassName('withborder')
98
répondu Diodeus - James MacFarlane 2014-07-09 07:12:47

en abrégé no.

vous ne pouvez pas appliquer CSS au HTML qui est chargé dans une iframe, à moins que vous n'ayez le contrôle sur la page chargée dans l'iframe en raison de restrictions de ressources entre domaines.

79
répondu mmattax 2017-01-12 14:35:27

Oui. Jetez un oeil à cet autre fil pour plus de détails: comment appliquer CSS à iframe?

var cssLink = document.createElement("link");
cssLink.href = "style.css";  
cssLink.rel = "stylesheet";  
cssLink.type = "text/css";  
frames['frame1'].document.body.appendChild(cssLink); 
36
répondu Eugene Rosenfeld 2017-05-23 12:18:18

, Vous pouvez récupérer le contenu d'un iframe puis jQuery sélecteurs contre eux comme d'habitude.

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

Bonne Chance!

11
répondu user1570636 2015-03-20 19:08:23

utilisez Jquery et attendez que la source soit chargée, C'est ainsi que j'ai obtenu(utilisé 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);
7
répondu Priyank Gupta 2014-07-24 08:23:07

la réponse rapide est: non, désolé.

il n'est pas possible d'utiliser seulement CSS. Vous avez essentiellement besoin d'avoir le contrôle sur le contenu de l'iframe pour style elle. Il existe des méthodes utilisant javascript ou le langage de votre choix (que j'ai lu un peu, mais je ne suis pas trop familier avec moi-même) pour insérer certains styles nécessaires de façon dynamique, mais vous auriez besoin d'un contrôle direct sur le contenu iframe, dont il semble que vous n'avez pas.

6
répondu Justin Lucente 2009-02-24 21:56:15

ce n'est probablement pas ce que vous pensez. l'iframe <link> dans le fichier css. Et vous ne pouvez pas le faire même avec javascript si c'est sur un autre domaine.

3
répondu Al W 2009-02-24 21:50:34

apparemment, cela peut se faire via jQuery:

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

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

3
répondu adamj 2017-05-23 12:10:29

Oui, c'est possible bien que encombrant. Vous devez imprimer / echo le HTML de la page dans le corps de votre page puis appliquer une fonction de changement de règle CSS. En utilisant les mêmes exemples que ci-dessus, vous utiliseriez essentiellement une méthode d'analyse pour trouver les divs dans la page, puis appliquer la CSS à celle-ci et ensuite la réimprimer/faire écho à l'utilisateur final. Je n'ai pas besoin de cela donc je ne veux pas coder cette fonction dans chaque élément dans le CSS d'une autre page Web juste pour aphtply.

, les Références:

1
répondu eric wiedemann 2017-05-23 12:18:18

une sorte de façon pirate de faire les choses est comme Eugene a dit. J'ai fini par suivre son code et faire un lien vers mon Css personnalisé pour la page. Le problème pour moi est que, Avec une timeline twitter, vous devez faire quelques esquives de twitter pour remplacer leur code un brin. Nous avons maintenant une ligne de temps mobile avec notre css, c'est-à-dire une police plus grande, une hauteur de ligne appropriée et le fait de cacher le scrollbar pour des hauteurs plus grandes que leurs limites.

var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary
1
répondu Cole Busby 2015-12-15 15:03:38

Impossible du côté du client . Une erreur javascript sera soulevée "erreur: Permission refusée pour accéder à la propriété "document "" puisque L'Iframe ne fait pas partie de votre domaine. La seule solution est de récupérer la page à partir du code côté serveur et de changer le CSS nécessaire.

0
répondu Chdid 2015-05-30 10:41:14