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?
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.
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>"));
});
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)
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.
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).
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);
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");
}
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 .
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;
}