Outrepasser le style de corps pour le contenu dans une iframe

Comment puis-je contrôler l'image de fond et la couleur d'un élément de corps dans un iframe ? Note, l'élément de corps intégré a une classe, et le iframe est d'une page qui fait partie de mon site.

la raison pour laquelle j'ai besoin de ceci est que mon site a un fond noir assigné au corps, puis un fond blanc assigné aux divs qui contiennent du texte. Un éditeur WYSIWYG utilise un iframe pour intégrer le contenu lors de l'édition, mais il n'inclut pas le div, donc le le texte est très difficile à lire.

le corps de La iframe lorsque dans l'éditeur dispose d'une classe qui n'est pas utilisé n'importe où d'autre, donc je suis en supposant qu'il a été mis là pour ce type de problèmes pourraient être résolus. Cependant, quand j'applique des styles à class.body , ils ne supplantent pas les styles appliqués au corps. La chose étrange est que les styles apparaissent dans Firebug, donc j'ai aucune idée de ce qui se passe!

Merci

mise à jour-j'ai essayé @mikeq's solution d'ajouter un style à la classe qui est la classe du corps. Cela ne fonctionne pas lorsqu'il est ajouté à la feuille de style de la page principale, mais il fonctionne quand il est ajouté avec Firebug. Je suppose que C'est parce que Firebug est appliqué à tous les éléments sur la page alors que le CSS n'est pas appliqué dans iframes. Cela signifie-t-il que L'ajout du css après chargement de la fenêtre avec JavaScript fonctionnerait?

109
demandé sur wazz 2011-06-27 18:49:29

9 réponses

une iframe est un "trou" dans votre page qui affiche une autre page Web à l'intérieur de celle-ci. Le contenu de l'iframe n'est pas dans une forme ou une partie de votre page mère.

comme d'autres l'ont déclaré, vos options sont:

  • donnez au fichier qui est chargé dans l'iframe le CSS nécessaire
  • si le fichier dans l'iframe est du même domaine que votre parent, vous pouvez alors accéder au DOM du document dans le iframe de la mère.
82
répondu DA. 2018-02-22 05:15:17

ce qui suit ne fonctionne que si le contenu iframe provient du même domaine parent.

le script jquery suivant fonctionne pour moi. Testé sur Chrome et IE8. L'iframe interne renvoie à une page qui se trouve sur le même domaine que la page mère.

dans ce cas précis, je cache un élément avec une classe spécifique dans l'iframe interne.

en gros, il suffit d'ajouter un élément "style" à la "tête" de l'intérieur de l'iframe.

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});
218
répondu SimpleSam5 2018-02-22 05:19:21

vous ne pouvez pas changer le style d'une page affichée dans une iframe sauf si vous avez accès direct et donc la propriété des fichiers html et/ou css source.

C'est d'arrêter de XSS (Cross Site Scripting)

23
répondu Myles Gray 2011-06-27 15:06:18

un iframe a une autre portée, donc vous ne pouvez pas y accéder pour changer son style ou son contenu avec javascript.

c'est en gros"une autre page".

la seule chose que vous pouvez faire est d'éditer son propre CSS, parce qu'avec votre CSS global vous ne pouvez rien faire.

7
répondu Alessandro Vendruscolo 2011-06-27 14:54:05

Remplacer un autre domaine iframe CSS

en utilisant une partie de réponse de SimpleSam5 , Je l'ai réalisé avec quelques-uns des iframes de chat de Tawk (leur interface de personnalisation est très bien, mais j'ai eu besoin de personnalisations supplémentaires).

dans cette iframe particulière qui apparaît sur les appareils mobiles, j'ai dû cacher l'icône par défaut et placer une de mes images de fond. J'ai fait la

Tawk_API.onLoad = function() {
// without a specific API, you may try a similar load function
// perhaps with a setTimeout to ensure the iframe's content is fully loaded
  $('#mtawkchat-minified-iframe-element').
    contents().find("head").append(
     $("<style type='text/css'>"+
       "#tawkchat-status-text-container {"+
         "background: url(https://example.net/img/my_mobile_bg.png) no-repeat center center blue;"+
         "background-size: 100%;"+
       "} "+
       "#tawkchat-status-icon {display:none} </style>")
   );
};

Je ne possède aucun domaine de Tawk et cela a fonctionné pour moi, donc vous pouvez le faire même si ce n'est pas du même domaine parent (malgré le commentaire de Jeremy Becker sur la réponse de Sam).

4
répondu CPHPython 2017-05-23 11:55:01

ce code utilise le JavaScript vanille. Il crée un nouvel élément <style> . Il définit le contenu textuel de cet élément comme une chaîne contenant le nouveau CSS. Et il ajoute cet élément directement à la tête du document iframe.

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  'body {' +
  '  background-color: some-color;' +
  '  background-image: some-image;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);
1
répondu jtheletter 2016-07-07 01:02:54

Si vous avez le contrôle de la page hébergeant l'iframe et la page de l'iframe, vous pouvez passer d'un paramètre de requête de l'iframe...

voici un exemple pour ajouter une classe à l'iframe basée sur le fait que le site d'hébergement est mobile ou non...

ajouter iFrame:

var isMobile=$("mobile").length; //detect if page is mobile
var iFrameUrl ="https://myiframesite/?isMobile=" + isMobile; 

$(body).append("<div id='wrapper'><iframe src=''></iframe></div>");
$("#wrapper iframe").attr("src", iFrameUrl ); 

à l'Intérieur de l'iFrame:

//add mobile class if needed
var url = new URL(window.location.href);
var isMobile = url.searchParams.get("isMobile");
if(isMobile == "1") {
    $("body").addClass("mobile");
}
1
répondu Ben 2018-05-14 15:44:35

peut-être que cela a changé MAINTENANT, mais j'ai utilisé une feuille de style séparée avec cet élément:

.feedEkList iframe
{
max-width: 435px!important;
width: 435px!important;
height: 320px!important;
}

pour réussir style incorporé youtube iframes...voir les billets de blog sur cette page .

-1
répondu Tim Jackson 2015-07-22 14:18:04

donnez le corps de votre page iframe un ID (Ou classe si vous le souhaitez)

<html>
<head></head>
<body id="myId">
</body>
</html>

puis, également dans la page de l'iframe, assignez un arrière-plan à celui dans CSS

#myId {
    background-color: white;
}
-21
répondu mikeq 2012-08-09 16:54:53