web-dev-qa-db-fra.com

Remplacer le style de corps du contenu dans un iframe

Comment puis-je contrôler l'image de fond et la couleur d'un élément du corps dans une iframe? Notez que l'élément body incorporé a une classe et que la iframe est celle d'une page appartenant à mon site. 

La raison pour laquelle j'ai besoin de cela est que mon site a un fond noir attribué au corps, puis un fond blanc affecté aux div qui contiennent du texte. Un éditeur WYSIWYG utilise une variable iframe pour incorporer le contenu lors de l'édition, mais n'inclut pas la div. Le texte est donc très difficile à lire. 

Le corps de la variable iframe dans l'éditeur a une classe qui n'est utilisée nulle part ailleurs, donc je suppose que cela a été mis là pour que des problèmes comme celui-ci puissent être résolus. Cependant, lorsque j'applique des styles à class.body, ils ne remplacent pas les styles appliqués à body. La chose étrange est que les styles apparaissent dans Firebug, donc je n'ai aucune idée de ce qui se passe! 

Merci 

UPDATE - J'ai essayé la solution de @ mikeq 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 fonctionne lorsqu'il est ajouté à Firebug. Je suppose que cela est dû au fait que Firebug est appliqué à tous les éléments de la page alors que le CSS n'est pas appliqué à l'iframes. Est-ce que cela signifie que l'ajout du fichier CSS après le chargement de la fenêtre avec JavaScript fonctionnerait? 

cssiframestylesoverride
119
jd6699

Un iframe est un "trou" dans votre page qui affiche une autre page Web à l'intérieur. Le contenu de l'iframe ne fait pas partie de votre page parent.

Comme d’autres l’ont dit, vos options sont les suivantes:

  • donne le fichier CSS nécessaire au fichier en cours de chargement dans l'iframe 
  • si le fichier dans l'iframe provient du même domaine que votre parent, vous pouvez accéder au DOM du document situé dans l'iframe à partir du parent.
92
DA.

Ce qui suit ne fonctionne que si le contenu de l'iframe provient du même domaine parent.

Le script jQuery suivant fonctionne pour moi. Testé sur Chrome et IE8. L'iframe interne fait référence à une page du même domaine que la page parent.

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

Fondamentalement, vous ajoutez simplement un élément 'style' à la 'tête' de l'iframe interne.

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

Vous ne pouvez pas modifier le style d'une page affichée dans une iframe à moins que vous n'ayez accès direct et donc la propriété des fichiers source HTML et/ou CSS.

Ceci est pour arrêter XSS (Cross Site Scripting)

24
Myles Gray

Une iframe a une autre portée, vous ne pouvez donc pas y accéder pour en modifier le style ou en javascript.

C'est fondamentalement "une autre page".

La seule chose que vous puissiez faire est de modifier son propre CSS, car avec votre CSS global, vous ne pouvez rien faire.

7
Alessandro Vendruscolo

Ce code utilise 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);
2
jtheletter

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

Voici un exemple pour ajouter une classe à l'iframe selon que le site d'hébergement est mobile ou non ...

Ajout d'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 );

Dans 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
Ben

J'ai un blog et j'ai eu beaucoup de mal à savoir comment redimensionner mon Gist intégré. Le gestionnaire de publication ne vous permet que d’écrire du texte, de placer des images et d’incorporer du code HTML. La mise en page du blog est elle-même réactive. Il est construit avec Wix. Cependant, le HTML incorporé ne l'est pas. J'ai beaucoup lu sur le fait qu'il est impossible de redimensionner des composants dans le corps d'iFrames générés. Donc, voici ma suggestion:

Si vous n’avez qu’un composant dans votre iFrame, c’est-à-dire votre Gist, vous ne pouvez redimensionner que le Gist. Oubliez l'iFrame.

J'ai eu des problèmes avec la fenêtre d'affichage, des dispositions spécifiques pour différents agents utilisateurs et voici ce qui a résolu mon problème:

<script language="javascript" type="text/javascript" src="https://Gist.github.com/roliveiravictor/447f994a82238247f83919e75e391c6f.js"></script>

<script language="javascript" type="text/javascript">

function windowSize() {
  let Gist = document.querySelector('#Gist92442763');

  let isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent)
    },
    BlackBerry: function() {
        return /BlackBerry/i.test(navigator.userAgent)
    },
    iOS: function() {
        return /iPhone|iPod/i.test(navigator.userAgent)
    },
    Opera: function() {
        return /Opera Mini/i.test(navigator.userAgent)
    },
    Windows: function() {
        return /IEMobile/i.test(navigator.userAgent) || /WPDesktop/i.test(navigator.userAgent)
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

  if(isMobile.any()) {
    Gist.style.width = "36%";
    Gist.style.WebkitOverflowScrolling = "touch"
    Gist.style.position = "absolute"
  } else {
    Gist.style.width = "auto !important";
  }
}

windowSize();

window.addEventListener('onresize', function() {
    windowSize();
});

</script>

<style type="text/css">

.Gist-data {
  max-height: 300px;
}

.Gist-meta {
  display: none;
}

</style>

La logique est de définir Gist (ou votre composant) css en fonction de l'agent utilisateur. Assurez-vous d’abord d’identifier votre composant avant de l’appliquer au sélecteur de requête. N'hésitez pas à regarder comment fonctionne la réactivité . 

J'espère que ça aide quelqu'un d'autre;)

à votre santé

0
Victor R. Oliveira