Utilisation de CSS pour affecter le style div dans iframe

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

Vous avez besoin de JavaScript. C'est la même chose que 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 politique 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 le rendre plus facile:

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

ou

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

Bref non.

Vous ne pouvez pas appliquer CSS à du HTML chargé dans un iframe, sauf si vous avez le contrôle sur la page chargée dans l'iframe en raison de restrictions de ressources inter-domaines.

Oui. Jetez un œil à 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); 

Vous pouvez récupérer le contenu d'un iframepremier, puis utiliser des jQuerysé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!

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

Ce n'est pas possible en utilisant simplement CSS. Vous devez essentiellement contrôler le contenu de l'iframe afin de le styliser. Il existe des méthodes utilisant javascript ou la langue Web de votre choix (que j'ai lue un peu, mais que je ne connais pas bien) pour insérer dynamiquement certains styles nécessaires, mais vous auriez besoin d'un contrôle direct sur le contenu iframe, qui sonne. comme vous n'en avez pas.

Utilisez Jquery et attendez que la source soit chargée, voici comment j'ai réalisé (intervalle angulaire utilisé, 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);

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

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

Une sorte de façon hack-ish de faire les choses, comme l'a dit Eugene. J'ai fini par suivre son code et créer un lien vers mon CSS personnalisé pour la page. Le problème pour moi était que, avec une chronologie Twitter, vous devez contourner Twitter pour remplacer son code par smidgen. Nous avons maintenant une chronologie glissante avec notre CSS, une police IE plus grande, une hauteur de ligne appropriée et la barre de défilement cachée pour des 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

Ajoutez simplement ceci et tout fonctionne bien:

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

Oui, c'est possible bien que lourd. Vous devez imprimer / faire écho au 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 donnés ci-dessus, vous utiliseriez essentiellement une méthode d'analyse pour trouver les divs dans la page, puis lui appliquer le CSS, puis la réimprimer / l'écho à l'utilisateur final. Je n'ai pas besoin de cela, donc je ne veux pas coder cette fonction dans chaque élément du CSS d'une autre page Web juste pour aphtply.

Références:

• Impression du contenu d'IFRAME
• Accès et impression du code source HTML à l'aide de PHP ou JavaScript
• http://www.w3schools.com/js/js_htmldom_html.asp
• http://www.w3schools.com/js/js_htmldom_css.asp

Combiner les différentes solutions, c'est ce qui a fonctionné pour moi.

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

Pas possible du côté client. Une erreur javascript s'affichera "Erreur: Autorisation refusée d'accéder à la propriété" document "" car 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 modifier le CSS nécessaire.