Utiliser CSS pour affecter le style div à l'intérieur d'iframe
11 réponses
vous avez besoin de JavaScript. C'est la même chose que de le faire dans la page mère, sauf que vous devez préfixer votre commande JavaScript avec le nom de l'iframe.
rappelez-vous, la même politique d'origine s'applique, donc vous ne pouvez faire cela qu'à un élément iframe qui vient de votre propre serveur.
j'utilise le Prototype framework pour le rendre plus facile:
frame1.$('mydiv').style.border = '1px solid #000000'
ou
frame1.$('mydiv').addClassName('withborder')
en abrégé no.
vous ne pouvez pas appliquer CSS au HTML qui est chargé dans une iframe, à moins que vous n'ayez le contrôle sur la page chargée dans l'iframe en raison de restrictions de ressources entre domaines.
Oui. Jetez un oeil à 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 iframe
puis jQuery
sé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!
utilisez Jquery et attendez que la source soit chargée, C'est ainsi que j'ai obtenu(utilisé l'intervalle angulaire, 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);
la réponse rapide est: non, désolé.
il n'est pas possible d'utiliser seulement CSS. Vous avez essentiellement besoin d'avoir le contrôle sur le contenu de l'iframe pour style elle. Il existe des méthodes utilisant javascript ou le langage de votre choix (que j'ai lu un peu, mais je ne suis pas trop familier avec moi-même) pour insérer certains styles nécessaires de façon dynamique, mais vous auriez besoin d'un contrôle direct sur le contenu iframe, dont il semble que vous n'avez pas.
ce n'est probablement pas ce que vous pensez. l'iframe <link>
dans le fichier css. Et vous ne pouvez pas le faire même avec javascript si c'est sur un autre domaine.
apparemment, cela peut se faire via jQuery:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
Oui, c'est possible bien que encombrant. Vous devez imprimer / echo le 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 ci-dessus, vous utiliseriez essentiellement une méthode d'analyse pour trouver les divs dans la page, puis appliquer la CSS à celle-ci et ensuite la réimprimer/faire écho à l'utilisateur final. Je n'ai pas besoin de cela donc je ne veux pas coder cette fonction dans chaque élément dans le CSS d'une autre page Web juste pour aphtply.
, les Références:
une sorte de façon pirate de faire les choses est comme Eugene a dit. J'ai fini par suivre son code et faire un lien vers mon Css personnalisé pour la page. Le problème pour moi est que, Avec une timeline twitter, vous devez faire quelques esquives de twitter pour remplacer leur code un brin. Nous avons maintenant une ligne de temps mobile avec notre css, c'est-à-dire une police plus grande, une hauteur de ligne appropriée et le fait de cacher le scrollbar pour des hauteurs plus grandes que 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
Impossible du côté du client . Une erreur javascript sera soulevée "erreur: Permission refusée pour accéder à la propriété "document "" puisque 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 changer le CSS nécessaire.