web-dev-qa-db-fra.com

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

Est-il possible de changer les styles d'une div qui réside dans un iframe sur la page en utilisant uniquement CSS?

cssiframe
231
Iris

Vous avez besoin de JavaScript. Cela revient à le faire dans la page parent, sauf que vous devez préfixer votre commande JavaScript avec le nom de l'iframe.

N'oubliez pas que la même stratégie d'origine s'applique, vous ne pouvez donc le faire que pour un élément iframe provenant de votre propre serveur.

J'utilise le framework Prototype pour faciliter les choses:

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

ou

frame1.$('mydiv').addClassName('withborder')
108
Diodeus - James MacFarlane

En bref non.

Vous ne pouvez pas appliquer CSS à du HTML chargé dans une iframe, à moins que vous ne contrôliez la page chargée dans l'iframe en raison de restrictions de ressources entre domaines.

91
mmattax

Oui. Jetez un oeil à 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);
43
Eugene Rosenfeld

Vous pouvez d'abord récupérer le contenu d'un iframe puis utiliser les sélecteurs jQuery 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!

13
user1570636

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

Ce n'est pas possible en utilisant simplement CSS. Vous devez en principe contrôler le contenu de l'iframe pour pouvoir le styler. Il existe des méthodes utilisant JavaScript ou le langage Web de votre choix (que j'ai lu un peu, mais que je ne connais pas bien moi-même) pour insérer dynamiquement certains styles nécessaires, mais vous auriez besoin d'un contrôle direct sur le contenu de l'iframe, ce qui semble être le cas. comme vous ne l'avez pas.

9
Justin Lucente

Utilisez Jquery et attendez que le code source soit chargé. Voici comment j'ai obtenu (Utilisé _ intervalle angular, 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
Priyank Gupta

probablement pas la façon dont vous pensez. l'iframe devra aussi <link> dans le fichier css. ET vous ne pouvez pas le faire même avec JavaScript si c'est sur un domaine différent.

3
Al W

Apparemment, cela peut être fait 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
adamj

Une sorte de façon de faire les choses est comme le disait Eugene. J'ai fini par suivre son code et créer un lien vers mon fichier Css personnalisé pour la page. Le problème pour moi était que, avec une chronologie Twitter, vous devez éviter Twitter pour remplacer leur code par un smidgen. Nous avons maintenant un calendrier glissant avec notre css, I.E. Police plus grande, hauteur de trait appropriée et masquage de la barre de défilement pour les hauteurs supérieures à 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
Cole Busby

Oui, c'est possible bien qu'encombrant. Vous devez imprimer/afficher le code 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 ceux donnés ci-dessus, vous utiliseriez essentiellement une méthode d’analyse consistant à rechercher les divs dans la page, puis à lui appliquer le code CSS, puis à le réimprimer/l’envoyer à l’utilisateur final. Je n'ai pas besoin de cela, alors je ne veux pas coder cette fonction dans tous les éléments du CSS d'une autre page Web, simplement.

Références:

0
eric wiedemann