Wie wende ich CSS auf iframe an?

Ich habe eine einfache Seite mit einigen Iframe-Abschnitten (um RSS-Links anzuzeigen). Wie kann ich dasselbe CSS-Format von der Hauptseite auf die im Iframe angezeigte Seite anwenden?

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

Hier gibt es zwei verschiedene Dinge: den Stil des Iframe-Blocks und den Stil der im Iframe eingebetteten Seite. Sie können den Stil des Iframe-Blocks wie folgt 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 in den 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 habe dieses Problem mit Google Kalender festgestellt . Ich wollte es auf einem dunkleren Hintergrund stylen und die Schriftart ändern.

Glücklicherweise hatte die URL aus dem Einbettungscode keine Einschränkung für den direkten Zugriff, also mithilfe der PHP-Funktion file_get_contents es also möglich, den gesamten Inhalt von der Seite abzurufen. Anstatt die Google-URL aufzurufen, können Sie auch eine PHP-Datei auf Ihrem Server aufrufen, 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 zuletzt kurz vor dem headEnd-Tag platziert.)

Geben Sie die Basis-URL 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);

Das 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 die iframe Einbettungscode 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 unter Ihrer Kontrolle steht 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 auf 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 universell 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, ohne <link>ein zusätzliches Stylesheet laden zu müssen.

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 Vorschläge!

Wenn Sie die Seite im Iframe steuern, wie Hangy sagte, besteht der einfachste Ansatz darin, eine gemeinsam genutzte CSS-Datei mit allgemeinen Stilen zu erstellen und dann einfach 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 bei Cross-Frame-Dom-Skripten aufgrund eines möglichen Missbrauchs für Spoofing und andere Hacks verschärft haben.

In diesem Tutorial erhalten Sie möglicherweise weitere Informationen zum Erstellen von Skripten für Iframes im Allgemeinen. Über Cross-Frame-Scripting werden die Sicherheitsbeschränkungen aus der IE-Perspektive erläutert.

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

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

Dies ist ein jQuery- Beispiel, das eine weitere HTML-Seite in Ihr Dokument einfügt. Dies ist viel SEO-freundlicher als iframe. Um sicherzugehen, dass die Bots die enthaltene Seite nicht indizieren, fügen Sie sie einfach hinzu, um sie nicht zuzulassenrobots.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>

Sie können jQuery auch direkt von Google einbinden : http://code.google.com/apis/ajaxlibs/documentation/ - dies bedeutet die optionale automatische Aufnahme neuerer Versionen und eine erhebliche Geschwindigkeitssteigerung. 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>

Manchmal iframeist das Fenster jedoch nicht geladen, 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>

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

Dieser Code verwendet Vanille-JavaScript. Es entsteht ein neues <style>Element. Der Textinhalt dieses Elements wird als Zeichenfolge festgelegt, die das neue CSS enthält. 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);

Wenn Sie "doc.open ()" sagen, bedeutet dies, dass Sie jedes HTML-Tag in den Iframe schreiben können. Sie sollten also alle grundlegenden Tags für die HTML-Seite schreiben. Wenn Sie einen CSS-Link in Ihrem Iframe-Kopf haben möchten, schreiben Sie einfach einen 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="https://stackoverflow.com/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');

doc.close();

Verwendung kann dies versuchen:

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

Sie können den Inhalt des Iframes nicht auf diese Weise formatieren. Mein Vorschlag wäre, serverseitiges Scripting (PHP, ASP oder ein Perl-Skript) 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 ausführen können.

Falls Sie Zugriff auf die Iframe-Seite haben und möchten, dass ein anderes CSS nur dann auf diese angewendet wird, wenn Sie es über Iframe auf Ihre 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 an iframe als Nachricht wie

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

* soll diese Nachricht unabhängig von der Domain im Iframe senden

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

Code zum Hinzufügen in der Iframe-Seite

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

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

});

Da viele Antworten für dieselben Domains geschrieben wurden, werde ich schreiben, wie dies in domänenübergreifenden Anwendungen gemacht wird.

Zunächst müssen Sie die Post Message API kennen . Wir brauchen einen Messenger, um zwischen zwei Fenstern zu kommunizieren.

Hier ist ein Messenger, den ich erstellt habe.

/**
 * Creates a messenger between two windows
 *  which have two different domains
 */
class CrossMessenger {

    /**
     * 
     * @param {object} otherWindow - window object of the other
     * @param {string} targetDomain - domain of the other window
     * @param {object} eventHandlers - all the event names and handlers
     */
    constructor(otherWindow, targetDomain, eventHandlers = {}) {
        this.otherWindow = otherWindow;
        this.targetDomain = targetDomain;
        this.eventHandlers = eventHandlers;

        window.addEventListener("message", (e) => this.receive.call(this, e));
    }

    post(event, data) {

        try {
            // data obj should have event name
            var json = JSON.stringify({
                event,
                data
            });
            this.otherWindow.postMessage(json, this.targetDomain);

        } catch (e) {}
    }

    receive(e) {
        var json;
        try {
            json = JSON.parse(e.data ? e.data : "{}");
        } catch (e) {
            return;
        }
        var eventName = json.event,
            data = json.data;

        if (e.origin !== this.targetDomain)
            return;

        if (typeof this.eventHandlers[eventName] === "function") 
            this.eventHandlers[eventName](data);
    }

}

Die Verwendung in zwei Fenstern zur Kommunikation kann Ihr Problem lösen.

In den Hauptfenstern

var msger = new CrossMessenger(iframe.contentWindow, "https://iframe.s.domain");

var cssContent = Array.prototype.map.call(yourCSSElement.sheet.cssRules, css_text).join('\n');
msger.post("cssContent", {
   css: cssContent
})

Empfangen Sie dann das Ereignis vom Iframe.

Im Iframe:

var msger = new CrossMessenger(window.parent, "https://parent.window.domain", {
    cssContent: (data) => {
        var cssElem = document.createElement("style");
        cssElem.innerHTML = data.css;
        document.head.appendChild(cssElem);
    }
})

Weitere Informationen finden Sie im vollständigen Tutorial zu Javascript und Iframes .

Ich habe eine andere Lösung gefunden, um den Stil wie folgt in das Haupt-HTML 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 dies tun (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 "Stil" -Tag im übergeordneten Fenster behalten möchten

Hier gibt es zwei Dinge innerhalb der Domäne

1. iFrame-Bereich
2. Seite im iFrame geladen

Sie möchten diese beiden Abschnitte also wie folgt gestalten:

1. Stil für den iFrame-Bereich

Es kann mit Hilfe von CSS mit diesem angesehenen Stil idoder classNamen. 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. Gestalten Sie die im iFrame geladene Seite

Diese Stile 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 ein Style-Tag in den 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>

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

Machen Sie es z-indexgröß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:noneIhr eigenes div, damit der iframe funktioniert, falls Sie darauf klicken müssen;)

Ich hoffe es wird jemandem helfen;)

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

Anwendungsbeispiele:

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

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

https://github.com/cssobj/cssobj

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

Dies ist nur ein Konzept, aber implementieren Sie dies nicht ohne Sicherheitsüberprüfungen und Filterung! Andernfalls könnte das Skript Ihre Website hacken!

Antwort: Wenn Sie die Zielwebsite steuern, können Sie das Empfängerskript wie folgt einrichten:

1) Setzen Sie den Iframe-Link mit dem styleParameter wie folgt :

http://your_site.com/target.php?color=red

(Die letzte Phrase wird a{color:red} durch die urlencodeFunktion codiert .

2) Stellen Sie die Empfängerseite target.phpwie folgt ein:

<head>
..........
$col = FILTER_VAR(SANITIZE_STRING, $_GET['color']);
<style>.xyz{color: <?php echo (in_array( $col, ['red','yellow','green'])?  $col : "black") ;?> } </style>
..........

Nun, ich habe diese Schritte befolgt:

1. Div mit einer Klasse zu halten iframe
2. iframeZum hinzufügen div.
3. In der CSS-Datei

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

Dies funktioniert in IE 6. Sollte in anderen Browsern funktionieren, überprüfen Sie!