Wie wende ich CSS auf iframe an?

Bearbeiten: Dies funktioniert nicht domänenübergreifend, es sei denn, das entsprechende CORS-Header ist gesetzt.

Hier gibt es zwei verschiedene Dinge: den Stil des Iframe-Blocks und den Stil der Seite, die in den Iframe eingebettet ist. Sie können den Stil des iframe-Blocks auf die übliche Weise festlegen:

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

Der Stil der im iframe eingebetteten Seite muss entweder durch Einfügen in die untergeordnete Seite festgelegt werden:

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

Oder es kann von der übergeordneten Seite mit Javascript geladen werden:

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

Ich bin auf dieses Problem mit Google Kalender gestoßen. Ich wollte es auf einem dunkleren Hintergrund stylen und die Schriftart ändern.

Glücklicherweise hatte die URL aus dem eingebetteten Code keine Einschränkung für den direkten Zugriff, so dass mit der Funktion PHP _file_get_contents_ der gesamte Inhalt von der Seite abgerufen werden kann. Anstatt die Google-URL aufzurufen, können Sie auch eine PHP-Datei aufrufen, die sich auf Ihrem Server befindet, z. _google.php_, der den ursprünglichen Inhalt mit Änderungen enthält:

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

Hinzufügen des Pfads zu Ihrem Stylesheet:

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

(Dadurch wird Ihr Stylesheet als letztes vor dem head -Endtag platziert.)

Geben Sie die Basis-URL aus der ursprünglichen URL an, falls CSS und JS relativ aufgerufen werden:

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

Die endgültige _google.php_ -Datei sollte folgendermaßen aussehen:

_<?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;
_

Dann ändern Sie den Einbettungscode von iframe in:

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

Viel Glück!

Wenn der Inhalt des Iframes nicht vollständig von Ihnen gesteuert wird oder Sie von verschiedenen Seiten mit unterschiedlichen Stilen auf den Inhalt zugreifen möchten, können Sie versuchen, ihn mit JavaScript zu bearbeiten.

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

Beachten Sie, dass dies je nach verwendetem Browser möglicherweise nur für Seiten funktioniert, die von derselben Domain bereitgestellt werden.

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

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

Ein iframe wird von den meisten Browsern allgemein wie eine andere HTML-Seite behandelt. Wenn Sie dasselbe Stylesheet auf den Inhalt des Iframes anwenden möchten, verweisen Sie einfach auf die dort verwendeten Seiten.

Hier erfahren Sie, wie Sie CSS-Code direkt anwenden können, ohne <link> zum Laden eines zusätzlichen Stylesheets zu verwenden.

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

Dadurch wird das Banner auf der Iframe-Seite ausgeblendet. Vielen Dank für Ihre Anregungen!

Wenn Sie die Seite im Iframe steuern, wie Hangy sagte, ist der einfachste Weg, eine gemeinsame CSS-Datei mit gemeinsamen Stilen zu erstellen, und dann von Ihren HTML-Seiten aus darauf zu verlinken.

Andernfalls ist es unwahrscheinlich, dass Sie den Stil einer Seite von einer externen Seite in Ihrem iframe dynamisch ändern können. Dies liegt daran, dass Browser die Sicherheit beim Cross-Frame-Dom-Scripting aufgrund des möglichen Missbrauchs für Spoofing und andere Hacks verschärft haben.

Dieses Tutorial bietet Ihnen möglicherweise weitere Informationen zum Erstellen von Skripten für iFrames im Allgemeinen. Über Cross-Frame-Scripting erläutert die Sicherheitsbeschränkungen aus der Perspektive IE.

Das obige mit einer kleinen Änderung funktioniert:

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

Funktioniert gut mit ff3 und ie8 mindestens

Wenn Sie CSS und JavaScript von der Hauptseite aus wiederverwenden möchten, sollten Sie möglicherweise erwägen, <IFRAME> durch einen von Ajax geladenen Inhalt zu ersetzen. Dies ist jetzt SEO-freundlicher, wenn Such-Bots JavaScript ausführen können.

Dies ist ein jQuery Beispiel, das eine andere HTML-Seite in Ihr Dokument einschließt. Dies ist viel SEO-freundlicher als iframe. Um sicherzugehen, dass die Bots die enthaltene Seite nicht indizieren, fügen Sie sie einfach hinzu, um robots.txt nicht zuzulassen.

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

Sie können jQuery auch direkt von Google einbinden: http://code.google.com/apis/ajaxlibs/documentation/ - Dies bedeutet, dass neuere Versionen optional automatisch eingebunden werden und die Geschwindigkeit erheblich erhöht wird. Das bedeutet auch, dass Sie ihnen vertrauen müssen, um Ihnen nur die jQuery zu liefern;)

Folgendes hat bei mir funktioniert.

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

Erweiterung der obigen jQuery-Lösung, um Verzögerungen beim Laden des Frame-Inhalts zu bewältigen.

$('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();
});

Meine kompakte Version:

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

Es kann jedoch vorkommen, dass iframe im geladenen Fenster nicht bereit ist, sodass ein Timer verwendet werden muss.

gebrauchsfertiger Code (mit Timer):

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

... und jQuery Link:

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

Wenn Sie "doc.open ()" sagen, bedeutet dies, dass Sie jedes HTML-Tag im iframe schreiben können. Sie sollten also alle grundlegenden Tags für die HTML-Seite schreiben und wenn Sie einen CSS-Link in Ihrem iframe-Kopf haben möchten, schreiben Sie einfach ein Iframe mit CSS-Link. Ich gebe Ihnen ein Beispiel:

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

Sie können den Inhalt des iframe nicht auf diese Weise formatieren. Mein Vorschlag wäre, serverseitiges Scripting (PHP, ASP oder ein Perl-Script) zu verwenden oder einen Onlinedienst zu finden, der einen Feed in JavaScript-Code konvertiert. Die einzige andere Möglichkeit wäre, wenn Sie ein serverseitiges Include erstellen können.

verwenden Sie können dies versuchen:

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

Andere Antworten hier scheinen jQuery- und CSS-Links zu verwenden.

Dieser Code verwendet Vanilla JavaScript. Es wird ein neues <style> -Element erstellt. Der Textinhalt dieses Elements wird als Zeichenfolge festgelegt, die das neue CSS enthält. Und dieses Element wird direkt an den Kopf des iframe-Dokuments angehängt.

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

Falls Sie Zugriff auf die iframe-Seite haben und möchten, dass ein anderes CSS nur dann darauf angewendet wird, wenn Sie es über iframe auf Ihrer Seite laden, habe ich hier eine Lösung für diese Art von Dingen gefunden

dies funktioniert auch, wenn iframe eine andere Domain lädt

überprüfen Sie über postMessage()

plan ist, senden Sie die CSS zu Iframe als eine Nachricht wie

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

* soll diese Nachricht unabhängig von der Domäne senden, in der sie sich befindet

und empfangen Sie die Nachricht in Iframe und fügen Sie die empfangene Nachricht (CSS) zu diesem Dokumentkopf hinzu.

code, der auf der Iframe-Seite hinzugefügt werden soll

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

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

});

Ich habe eine andere Lösung gefunden, um den Stil wie folgt in den Haupt-HTML-Code einzufügen

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

und dann in iframe mache dies (siehe js onload)

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

und in js

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

Es ist möglicherweise nicht die beste Lösung, und es kann sicherlich verbessert werden, aber es ist eine weitere Option, wenn Sie ein "style" -Tag im übergeordneten Fenster behalten möchten

Ich denke, der einfachste Weg ist es, ein weiteres Div an der gleichen Stelle wie der Iframe hinzuzufügen

machen Sie den z-index größer als den iframe-Container, damit Sie ganz einfach Ihr eigenes div stylen können. Wenn Sie darauf klicken müssen, verwenden Sie einfach pointer-events:none auf Ihrem eigenen div, damit der iframe funktioniert, falls Sie darauf klicken müssen;)

Ich hoffe es hilft jemandem;)

Hier gibt es zwei Dinge innerhalb der Domäne

1. iFrame-Bereich
2. Seite im iFrame geladen

So möchten Sie diese beiden Abschnitte wie folgt stylen,

1. Stil für den iFrame-Bereich

Es kann mit CSS mit dem angesehenen id oder class Namen formatiert werden. Sie können es auch einfach in Ihren übergeordneten Stylesheets formatieren.

<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. Formatieren Sie die im iFrame geladene Seite

Diese Styles können mit Hilfe von Javascript von der übergeordneten Seite geladen werden

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

stellen Sie dann diese CSS-Datei auf den respektierten iFrame-Abschnitt ein

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

Hier können Sie auch den Hauptteil der Seite im iFrame auf diese Weise bearbeiten

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

Wir können Style-Tags in iframe einfügen. Gepostet auch hier ...

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

Alternativ können Sie die CSS-in-JS-Technologie wie folgt verwenden:

https://github.com/cssobj/cssobj

Es kann JS-Objekte dynamisch als CSS in iframe einfügen

Es gibt ein wundervolles Skript , das einen Knoten durch eine iframe-Version von sich selbst ersetzt. CodePen Demo

Verwendungsbeispiele:

// 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">'
});