Hoe CSS toepassen op IFRAME?

Ik heb een eenvoudige pagina met een aantal iframe-secties (om RSS-links weer te geven). Hoe kan ik hetzelfde CSS-indeling toepassen op de hoofdpagina naar de pagina die wordt weergegeven in de IFRAME?

1, Autoriteit 100%

EDIT: Dit werkt geen cross-domein tenzij de juiste Cors Header is ingesteld.

Er zijn hier twee verschillende dingen: de stijl van het IFrame-blok en de stijl van de pagina ingesloten in de IFRAME. U kunt de stijl van het IFRAME-blok op de gebruikelijke manier instellen:

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

De stijl van de pagina ingesloten in de IFRAME moet worden ingesteld door het op te nemen in de pagina Kind:

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

of het kan worden geladen van de bovenliggende pagina met JavaScript:

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

2, Autoriteit 46%

Ik heb dit probleem ontmoet met Google Agenda . Ik wilde het op een donkerdere achtergrond stijl en het lettertype veranderen.

Gelukkig had de URL van de insluitenscode geen beperking op directe toegang, dus met behulp van PHP-functie file_get_contentsHet is mogelijk om de
volledige inhoud van de pagina. In plaats van de Google-URL aan te roepen, is het mogelijk om een php-bestand op uw server aan te roepen, bijv. google.php, die de originele inhoud met aanpassingen zal bevatten:

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

Het pad naar uw stylesheet toevoegen:

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

(Hierdoor wordt uw stylesheet als laatste geplaatst net voor de head-eindtag.)

Specificeer de basis-URL van de originele url voor het geval css en js relatief worden genoemd:

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

Het uiteindelijke bestand google.phpmoet er als volgt uitzien:

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

Vervolgens verander je de iframeinsluitcode in:

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

Veel succes!

Antwoord 3, autoriteit 17%

Als u de inhoud van het iframe niet volledig onder uw controle heeft of als u toegang wilt tot de inhoud van verschillende pagina’s met verschillende stijlen, kunt u proberen deze te manipuleren met 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);

Houd er rekening mee dat, afhankelijk van de browser die u gebruikt, dit mogelijk alleen werkt op pagina’s die vanuit hetzelfde domein worden bediend.

Antwoord 4, autoriteit 13%

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

Antwoord 5, autoriteit 7%

Hier leest u hoe u CSS-code direct kunt toepassen zonder <link>te gebruiken om een extra stylesheet te laden.

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

Hiermee wordt de banner op de iframe-pagina verborgen. Bedankt voor je suggesties!

Antwoord 6, autoriteit 6%

Een iframe wordt door de meeste browsers universeel behandeld als een andere HTML-pagina. Als u dezelfde stylesheet wilt toepassen op de inhoud van het iframe, hoeft u alleen maar te verwijzen naar de pagina’s die daarin worden gebruikt.

Antwoord 7, autoriteit 6%

Als je de pagina in het iframe beheert, zoals Hangy al zei, is de gemakkelijkste manier om een gedeeld CSS-bestand met veelvoorkomende stijlen te maken, en er vervolgens naar te linken vanaf je html-pagina’s.

Anders is het onwaarschijnlijk dat u de stijl van een pagina dynamisch kunt wijzigen vanaf een externe pagina in uw iframe. Dit komt omdat browsers de beveiliging van cross-frame dom-scripting hebben aangescherpt vanwege mogelijk misbruik voor spoofing en andere hacks.

Deze tutorialkan u meer informatie geven over het scripten van iframes in het algemeen. Over cross-frame scriptinglegt de beveiligingsbeperkingen van de IE perspectief.

Antwoord 8, autoriteit 4%

Het bovenstaande met een kleine verandering werkt:

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

Werkt in ieder geval prima met ff3 en ie8

Antwoord 9, autoriteit 3%

Het volgende werkte voor mij.

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

10, Autoriteit 3%

Als u CSS- en JavaScript opnieuw wilt hergebruiken, moet u rekening houden met het vervangen van <IFRAME>met een AJAX-geladen inhoud. Dit is nu meer SEO-vriendelijk wanneer zoekbots in staat zijn om JavaScript uit te voeren.

Dit is jQuery voorbeeld met een andere HTML-pagina in uw document. Dit is veel meer SEO-vriendelijker dan iframe. Om er zeker van te zijn dat de bots niet de meegeleverde pagina indexeren, voegt u deze toe om niet toe te staan ​​in 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>

U kunt ook jQuery rechtstreeks van Google toevoegen: http://code.google.com/ API’s / Ajaxlibs / documentatie / – dit betekent optionele auto-opname van nieuwere versies en een aanzienlijke snelheidstijging. Betekent ook dat u ze moet vertrouwen op het leveren van u alleen de jQuery;)

11, Autoriteit 2%

Uitbreiden op de bovenstaande jQuery-oplossing om te gaan met eventuele vertragingen bij het laden van de frame-inhoud.

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

Antwoord 12, autoriteit 2%

Mijn compacte versie:

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

Soms is het iframeechter niet gereed wanneer het venster wordt geladen, dus is het nodig om een timerte gebruiken.

Klaar voor gebruik(met 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>

…en jQuery-link:

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

Antwoord 13, autoriteit 2%

gebruik kan dit proberen:

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

Antwoord 14, autoriteit 2%

Andere antwoorden hier lijken jQuery- en CSS-links te gebruiken.

Deze code gebruikt vanille JavaScript. Het creëert een nieuw <style>element. Het stelt de tekstinhoud van dat element in als een tekenreeks die de nieuwe CSS bevat. En het voegt dat element rechtstreeks toe aan de kop van het iframe-document.

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

Antwoord 15

Als je “doc.open()” zegt, betekent dit dat je elke HTML-tag in het iframe kunt schrijven, dus je moet alle basistags voor de HTML-pagina schrijven en als je een CSS-link in je iframe-kop wilt hebben schrijf gewoon een iframe met een CSS-link erin. Ik geef je een voorbeeld:

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

Antwoord 16

Je kunt de inhoud van het iframe niet op deze manier stylen. Mijn suggestie zou zijn om serverside-scripting (PHP, ASP of een Perl-script) te gebruiken of een online service te zoeken die een feed naar JavaScript-code zal converteren. De enige andere manier om dit te doen is als je een serverside include kunt doen.

Antwoord 17

Als je toegang hebt tot de iframe-pagina en je wilt dat er alleen een andere CSS op wordt toegepast als je deze via iframe op je pagina laadt, heb ik hier een oplossing voor dit soort dingen gevonden

dit werkt zelfs als iframe een ander domein laadt

controleer over postMessage()

plan is, stuur de css naar iframe als een bericht zoals

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

*is om dit bericht te verzenden, ongeacht het domein in iframe

en ontvang het bericht in iframe en voeg het ontvangen bericht (CSS) toe aan die documentkop.

code om toe te voegen aan iframe-pagina

window.addEventListener('message',function(e){
    if(e.data == 'send_user_details')
    document.head.appendChild('<style>'+e.data+'</style>');
});

Antwoord 18

Ik denk dat de gemakkelijkste manier is om nog een div toe te voegen, op dezelfde plaats als het iframe, en dan

maak de z-indexgroter dan de iframe-container, zodat je eenvoudig je eigen div kunt stylen. Als je erop moet klikken, gebruik dan gewoon pointer-events:noneop je eigen div, zodat het iframe werkt als je erop moet klikken 😉

Ik hoop dat het iemand zal helpen 😉

Antwoord 19

Ik heb een andere oplossing gevonden om de stijl op deze manier in de hoofd-html te plaatsen

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

en doe dit dan in iframe (zie de js onload)

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

en in js

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

Het is misschien niet de beste oplossing, en het kan zeker worden verbeterd, maar het is een andere optie als u een “stijl” -tag in oudervenster

wilt behouden

20

Hier zijn er twee dingen in het domein

1. IFRAME SECTIE
2. pagina geladen in de IFRAME

Wil je die twee secties als volgt stylen,

1. Stijl voor de IFRAME-sectie

het kan stijl gebruiken met behulp van CSS met die gerespecteerde idof classnaam. U kunt het ook in uw ouderstijlplaten stijl vinden.

<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. Stijl de pagina geladen in de iframe

Deze stijlen kunnen van de bovenliggende pagina worden geladen met behulp van Javascript

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

Stel vervolgens in dat het CSS-bestand naar het gerespecteerde IFRAME-gedeelte

//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 kunt u het hoofdgedeelte van de pagina in de iframe bewerken met behulp van deze Way ook

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

21

We kunnen stijl tag invoegen in IFRAME.

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

22

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

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

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

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

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