Comment appliquer CSS à iframe?

Edit: cela ne fonctionne pas cross domain à moins que le CORS header ne soit défini.

il y a deux choses différentes ici: le style du bloc iframe et le style de la page intégrée dans l'iframe. Vous pouvez définir le style du bloc iframe de la manière habituelle:

<iframe name="iframe1" id="iframe1" src="empty.htm" 
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 100%; height: 120px;"></iframe>

Le style de la page incorporée dans l'iframe doit être soit en l'incluant dans la page enfant:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

ou il peut être chargé à partir de la page mère avec Javascript:

var cssLink = document.createElement("link");
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['iframe1'].document.head.appendChild(cssLink);

j'ai rencontré ce problème avec Google Agenda . Je voulais le style sur un fond plus sombre et changer la police.

heureusement, L'URL du code embed n'avait aucune restriction d'accès direct, donc en utilisant la fonction PHP file_get_contents il est possible d'obtenir le tout le contenu de la page. Au lieu d'appeler l'URL de Google, il est possible d'appeler un fichier php situé sur votre serveur, ex. google.php , qui contiendra le contenu original avec modifications:

$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');

ajouter le chemin à votre feuille de style:

$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);

(ceci placera votre feuille de style en dernier juste avant l'étiquette de fin head .)

spécifier la forme de l'url de base de l'url d'origine dans le cas où css et js sont appelés relativement:

$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);

La finale google.php fichier devrait ressembler à ceci:

<?php
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
echo $content;

puis vous changez le iframe code intégré à:

<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

bonne chance!

si le contenu de l'iframe n'est pas entièrement sous votre contrôle ou si vous voulez accéder au contenu de pages différentes avec des styles différents, vous pouvez essayer de le manipuler en utilisant JavaScript.

var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

notez que selon le navigateur que vous utilisez, cela ne peut fonctionner que sur des pages servies à partir du même domaine.

var $head = $("#eFormIFrame").contents().find("head");

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));

une iframe est universellement traitée comme une page HTML différente par la plupart des navigateurs. Si vous souhaitez appliquer la même feuille de style pour le contenu de l'iframe, juste le référencer les pages utilisées.

si vous contrôlez la page dans l'iframe, comme hangy l'a dit, l'approche la plus facile est de créer un fichier CSS partagé avec des styles communs, alors il suffit de lien à partir de vos pages html.

sinon il est peu probable que vous puissiez changer dynamiquement le style d'une page à partir d'une page externe dans votre iframe. Cela est dû au fait que les navigateurs ont renforcé la sécurité sur les scripts de dom cross frame en raison d'une possible mauvaise utilisation pour la mystification et d'autres piratages.

ce tutoriel peut vous fournir plus d'informations sur les iframes de script en général. à propos de cross frame scripting explique les restrictions de sécurité du point de vue de L'IE.

Voici comment appliquer le code CSS directement sans utiliser <link> pour charger une feuille de style supplémentaire.

var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
          '#banner{display:none}; ' +
          '</style>';
jQuery(head).append(css);

cela cache la bannière dans la page iframe. Merci pour vos suggestions!

ci-dessus avec un peu de changement:

var cssLink = document.createElement("link") 
cssLink.href = "pFstylesEditor.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 

//Instead of this
//frames['frame1'].document.body.appendChild(cssLink);
//Do this

var doc=document.getElementById("edit").contentWindow.document;

//If you are doing any dynamic writing do that first
doc.open();
doc.write(myData);
doc.close();

//Then append child
doc.body.appendChild(cssLink);

fonctionne très bien avec ff3 et ie8 au moins

si vous voulez réutiliser CSS et JavaScript à partir de la page principale peut-être que vous devriez envisager de remplacer <IFRAME> par un contenu chargé Ajax. C'est plus SEO maintenant quand les bots de recherche sont capables d'exécuter JavaScript.

C'est jQuery exemple qui inclut une autre page html dans votre document. C'est beaucoup plus SEO amical que iframe . Afin d'être sûr que les bots ne sont pas l'indexation de la page incluse il suffit de l'ajouter à refus dans robots.txt

<html>
  <header>
    <script src="/js/jquery.js" type="text/javascript"></script>
  </header>
  <body>
    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 
  </body>
</html>

vous pouvez également inclure jQuery directement depuis Google: http://code.google.com/apis/ajaxlibs/documentation / -cela signifie l'auto-inclusion facultative des nouvelles versions et une certaine augmentation de vitesse significative. Aussi, signifie que vous avez confiance pour vous livrer juste le jQuery ;)

ce qui suit a fonctionné pour moi.

var iframe = top.frames[name].document;
var css = '' +
          '<style type="text/css">' +
          'body{margin:0;padding:0;background:transparent}' +
          '</style>';
iframe.open();
iframe.write(css);
iframe.close();

Mon version compacte :

<script type="text/javascript">
$(window).load(function () {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }   
});
</script>

cependant, parfois le iframe n'est pas prêt sur la fenêtre chargée, il est donc nécessaire d'utiliser un minuterie .

Code prêt à l'emploi (avec minuterie):

<script type="text/javascript">
var frameListener;
$(window).load(function () {
    frameListener = setInterval("frameLoaded()", 50);
});
function frameLoaded() {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            clearInterval(frameListener); // stop the listener
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }
}
</script>

...et jQuery link:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>

développement de la solution jQuery ci-dessus pour faire face à tout retard dans le chargement du contenu du châssis.

$('iframe').each(function(){
    function injectCSS(){
        $iframe.contents().find('head').append(
            $('<link/>', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' })
        );
    }

    var $iframe = $(this);
    $iframe.on('load', injectCSS);
    injectCSS();
});

Vous ne serez pas en mesure de style, le contenu de l'iframe de cette façon. Ma suggestion serait d'utiliser serverside scripting (PHP, ASP, ou un script Perl) ou de trouver un service en ligne qui convertira un flux en code JavaScript. La seule autre façon de faire serait si vous pouvez faire un server-side include.

quand vous dites "doc.open () " cela signifie que vous pouvez écrire n'importe quelle étiquette HTML à l'intérieur de l'iframe, donc vous devriez écrire toutes les étiquettes de base pour la page HTML et si vous voulez avoir un lien CSS dans votre tête d'iframe il suffit d'écrire une iframe avec le lien CSS dedans. Je vous donne un exemple:

doc.open();

doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-quiv="Content-Type" content="text/html; charset=utf-8"/><title>Print Frame</title><link rel="stylesheet" type="text/css" href="/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');

doc.close();

autres réponses ici semblent utiliser des liens jQuery et CSS.

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 =
  '.some-class-name {' +
  '  some-style-name: some-value;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);

utiliser peut essayer ceci:

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

nous pouvons insérer une étiquette de style dans iframe. posté aussi ici...

<style type="text/css" id="cssID">
.className
{
    background-color: red;
}
</style>

<iframe id="iFrameID"></iframe>

<script type="text/javascript">
    $(function () {
        $("#iFrameID").contents().find("head")[0].appendChild(cssID);
        //Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]);
    });
</script>

j'ai trouvé une autre solution pour mettre le style dans le html principal comme ceci

<style id="iframestyle">
    html {
        color: white;
        background: black;
    }
</style>
<style>
    html {
        color: initial;
        background: initial;
    }
    iframe {
        border: none;
    }
</style>

et puis dans un iframe faire (voir la js onload)

<iframe  onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>

et dans js

<script>
    ifstyle = document.getElementById('iframestyle')
    iframe = top.frames["log"];
</script>

ce n'est peut-être pas la meilleure solution, et elle peut certainement être améliorée, mais c'est une autre option si vous voulez garder une étiquette "style" dans la fenêtre parent

Incase si vous avez accès à la page iframe et que vous voulez qu'un CSS différent s'applique dessus seulement quand vous le chargez via iframe sur votre page, Ici j'ai trouvé une solution pour ce genre de choses

cela fonctionne même si iframe charge un domaine différent""

contrôle à propos de postMessage()

plan est, envoyer le css à iframe comme un message comme

iframenode.postMessage('h2{color:red;}','*');

* est d'envoyer ce message indépendamment de quel domaine il s'agit en iframe

et recevoir le message dans iframe et ajouter le message reçu(CSS) à cette tête de document.

code à ajouter à la page iframe

window.addEventListener('message',function(e){

    if(e.data == 'send_user_details')
    document.head.appendChild('<style>'+e.data+'</style>');

});

je pense que la façon la plus facile est d'ajouter un autre div, au même endroit que l'iframe, puis

faire son z-index plus grand que le conteneur iframe, de sorte que vous pouvez tout simplement style votre propre div. Si vous avez besoin de cliquer dessus, utilisez simplement pointer-events:none sur votre propre div, de sorte que l'iframe fonctionne au cas où vous auriez besoin de cliquer dessus;)

j'espère que Ça aidera quelqu'un ;)

il y a un wonderful script qui remplace un noeud par une version iframe de lui-même. CodePen Démo

Exemples D'Utilisation:

// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);

// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
  return iframify(component, {});
});

// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
  headExtra: '<style>.component { color: red; }</style>',
  metaViewport: '<meta name="viewport" content="width=device-width">'
});

var link1 = document.createElement('link');
    link1.type = 'text/css';
    link1.rel = 'stylesheet';
    link1.href = "../../assets/css/normalize.css";
window.frames['richTextField'].document.body.appendChild(link1);

ici, il y a deux choses à l'intérieur du domaine

1. iFrame Section
2. page chargée dans l'iFrame

Si vous voulez le style de ces deux sections, comme suit,

1. Style pour la Section iFrame

il peut styliser en utilisant CSS avec ce respecté id ou class nom. Vous pouvez simplement le style dans votre parent Feuilles de Style aussi.

<style>
#my_iFrame{
height: 300px;
width: 100%;
position:absolute;
top:0;
left:0;
border: 1px black solid;
}
</style>

<iframe name='iframe1' id="my_iFrame" src="#" cellspacing="0"></iframe>

2. Style la Page chargée dans l'iFrame

ces Styles peuvent être chargés à partir de la page mère à L'aide de Javascript

var cssFile  = document.createElement("link") 
cssLink.rel  = "stylesheet"; 
cssLink.type = "text/css"; 
cssLink.href = "iFramePage.css"; 

puis définissez ce fichier CSS à la section iframe respectée

//to Load in the Body Part
frames['my_iFrame'].document.body.appendChild(cssFile); 
//to Load in the Head Part
frames['my_iFrame'].document.head.appendChild(cssFile);

ici, vous pouvez éditer la partie en tête de la Page à l'intérieur de l'iFrame en utilisant cette façon aussi

var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead .append(
   $("<link/>",{ 
      rel: "stylesheet", 
      href: urlPath , 
      type: "text/css" }
     ));

comme alternative, vous pouvez utiliser la technologie CSS-in - JS, comme ci-dessous lib:

https://github.com/cssobj/cssobj

il peut injecter l'objet JS comme CSS à iframe, dynamiquement

la meilleure façon peut être la suivante (si vous contrôlez le site cible):

1) Définissez le lien iframe avec style paramètre, comme:

http://your_site.com/target.php?style=a%7Bcolor%3Ared%7D

(la dernière phrase est a{color:red} encodé par urlencode fonction.

2) Réglez la page du récepteur target.php comme ceci:

<head>
..........
<style><? echo urldecode($_GET['style']);?> </style>
..........

Eh bien, j'ai suivi ces étapes:

1. Div avec une classe pour tenir iframe
2. ajouter iframe au div .
3. Dans le fichier CSS,

divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

cela fonctionne dans IE 6. Devrait fonctionner dans d'autres navigateurs, Vérifiez!