Frage Wie man CSS auf iframe anwendet?


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


858
2017-10-20 08:27


Ursprung


Antworten:


Bearbeiten: Dies funktioniert nicht Cross-Domain, sofern nicht angemessen CORS-Header ist eingestellt.

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 gewohnt 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 auf der untergeordneten Seite festgelegt werden:

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

Oder es kann von der Elternseite 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);

378
2017-10-20 09:07



Ich habe dieses Problem mit getroffen Google Kalender. Ich wollte es auf einem dunkleren Hintergrund stylen und die Schriftart ändern.

Zum Glück hatte die URL aus dem Einbettungscode keine direkte Zugriffsbeschränkung, also über die PHP-Funktion file_get_contents es ist möglich, das zu bekommen gesamter Inhalt von der Seite. Anstatt die URL von Google aufzurufen, ist es möglich, eine PHP-Datei aufzurufen, die sich auf Ihrem Server befindet, z. google.php, die den ursprünglichen Inhalt mit Änderungen enthalten:

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

Pfad zu Ihrem Stylesheet hinzufügen:

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

(Dadurch wird Ihr Stylesheet zuletzt vor dem head End-Tag.)

Geben Sie die Basis-URL der ursprünglichen URL an, falls css und js relativ heißen:

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

Das endgültige google.php Datei sollte so 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 änderst du die iframe Code einbetten zu:

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

Viel Glück!


174
2017-09-20 22:21



Wenn der Inhalt des Iframes nicht vollständig unter Ihrer Kontrolle steht oder Sie auf den Inhalt von verschiedenen Seiten mit unterschiedlichen Stilen 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 aus bedient werden.


69
2017-10-20 08:58



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

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

51
2017-11-21 16:17



Ein Iframe wird von den meisten Browsern wie eine andere HTML-Seite behandelt. Wenn Sie das gleiche Stylesheet auf den Inhalt des Iframes anwenden möchten, verweisen Sie einfach auf die darin verwendeten Seiten.


35
2017-10-20 08:37



Wenn Sie die Seite im Iframe kontrollieren, wie Hangy sagt, ist es am einfachsten, eine gemeinsame CSS-Datei mit gängigen Stilen zu erstellen und dann einfach von Ihren HTML-Seiten 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-Scripts verschärft haben, weil sie möglicherweise für Spoofing und andere Hacks missbraucht werden.

Dieses Tutorial bietet Ihnen möglicherweise mehr Informationen zum Erstellen von Iframes im Allgemeinen. Über Cross-Frame-Skripting erläutert die Sicherheitseinschränkungen aus der IE-Perspektive.


26
2017-10-20 08:52



Hier erfahren Sie, wie Sie den CSS-Code direkt anwenden, ohne ihn zu verwenden <link> um ein zusätzliches Stylesheet zu laden.

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 in der Iframe-Seite ausgeblendet. Vielen Dank für Ihre Vorschläge!


24
2017-10-15 22:47



Das obige mit ein wenig Ä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 mindestens ie8


20
2017-07-28 22:53



Wenn Sie CSS und JavaScript von der Hauptseite aus wiederverwenden möchten, sollten Sie es vielleicht ersetzen <IFRAME>mit einem Ajax geladenen Inhalt. Dies ist jetzt SEO-freundlicher, wenn Such-Bots JavaScript ausführen können.

Das ist jQuery Beispiel, das eine weitere HTML-Seite in Ihr Dokument einbezieht. Dies ist viel SEO-freundlicher als iframe. Um sicherzustellen, dass die Bots die eingeschlossene Seite nicht indizieren, fügen Sie sie einfach hinzu, um sie zu verbieten 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>

Sie können jQuery auch direkt von Google hinzufügen: http://code.google.com/apis/ajaxlibs/dokumentation/ - Dies bedeutet optionale automatische Einbeziehung neuerer Versionen und eine erhebliche Geschwindigkeitssteigerung. Auch bedeutet, dass Sie ihnen vertrauen müssen, um Ihnen nur die jQuery zu liefern;)


12
2018-03-02 07:16



Das Folgende funktionierte für mich.

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
2018-05-23 16:22



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 jedoch iframe ist nicht bereit, wenn das Fenster geladen ist. Daher müssen Sie a verwenden Timer.

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>

8
2018-03-21 09:07