Comment appliquer CSS à iframe?

j'ai une page simple qui a des sections iframe (pour afficher des liens RSS). Comment appliquer le même format CSS de la page principale à la page affichée dans l'iframe?

876
demandé sur FelipeAls 2008-10-20 12:27:14
la source

26 ответов

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);
385
répondu Tamas Czinege 2018-05-17 16:30:08
la source

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!

175
répondu SequenceDigitale.com 2017-10-04 17:00:26
la source

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.

69
répondu Horst Gutmann 2008-10-20 12:58:47
la source
var $head = $("#eFormIFrame").contents().find("head");

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));
52
répondu Rami Sarieddine 2017-05-23 17:51:48
la source

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.

36
répondu hangy 2011-06-04 12:32:17
la source

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.

26
répondu Ash 2008-10-20 12:52:14
la source

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!

24
répondu domih 2013-10-16 13:31:33
la source

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

20
répondu Eric 2015-09-28 07:04:13
la source

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 ;)

12
répondu sorin 2013-08-01 18:46:07
la source

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();
11
répondu peter 2011-06-04 12:35:08
la source

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>
8
répondu Zbigniew Wiadro 2015-09-28 07:09:47
la source

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();
});
8
répondu David Bradshaw 2017-02-20 13:45:54
la source

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.

6
répondu Peter Mortensen 2011-06-04 12:33:20
la source

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();
6
répondu parham fazel 2011-06-04 12:34:22
la source

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);
3
répondu jtheletter 2016-07-07 03:59:53
la source

utiliser peut essayer ceci:

$('iframe').load( function() {
     $('iframe').contents().find("head")
     .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
  });
3
répondu Ajay Malhotra 2017-09-01 13:15:49
la source

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>
2
répondu Palani Kumar 2017-05-23 14:33:24
la source

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

2
répondu jperelli 2015-03-18 17:51:00
la source

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

});
2
répondu CodeRows 2016-05-19 23:26:11
la source

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 ;)

1
répondu Mateusz Winnicki 2014-07-31 16:34:27
la source

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

enter image description here

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">'
});
0
répondu karlisup 2016-10-03 22:41:01
la source

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);
0
répondu Jeeva 2016-10-28 06:14:28
la source

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" }
     ));
0
répondu K.Suthagar 2016-12-29 06:47:08
la source

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

0
répondu James Yang 2017-01-04 05:27:00
la source

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>
..........
-1
répondu T.Todua 2016-10-17 11:01:32
la source

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!

-14
répondu JannuD 2015-09-28 07:10:17
la source

Autres questions sur html css iframe