Jak zastosować CSS do iframe?

1016

Mam prostą stronę, która ma kilka sekcji iframe (do wyświetlania linków RSS). Jak mogę zastosować ten sam format CSS ze strony głównej do strony wyświetlanej w ramce iframe?

Akshay Mulgavkar
źródło
66
Jest to możliwe, ale tylko wtedy, gdy domena iframe jest taka sama jak
domena
13
gawpertron, dla wyjaśnienia, czy mówisz, że jeśli używam treści iFrame z innej domeny, której nie kontroluję, nie mam możliwości kontrolowania CSS tych treści?
Ville M,
Czy możesz podać link do strony, abyśmy mogli zobaczyć nasze zmiany?
5
Domena, port i protokół muszą być takie same, nie działa również z poddomenami.
Lee Penkman,

Odpowiedzi:

434

Edycja: To nie działa między domenami, chyba że ustawiony jest odpowiedni nagłówek CORS .

Istnieją tutaj dwie różne rzeczy: styl bloku iframe i styl strony osadzonej w iframe. Możesz ustawić styl bloku iframe w zwykły sposób:

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

Styl strony osadzonej w elemencie iframe należy ustawić, umieszczając go na stronie podrzędnej:

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

Lub można go załadować ze strony nadrzędnej za pomocą Javascript:

var cssLink = document.createElement("link");
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['iframe1'].document.head.appendChild(cssLink);
Tamas Czinege
źródło
30
Uwaga: wydaje mi się, że niektóre z opublikowanych wcześniej przykładów są teraz nieprawidłowe dla HTML5. Możesz uzyskać dostęp do zawartości ramie w następujący sposób: document.getElementById("myframe").contentDocument. Osadzanie css nadal nie działa dla mnie.
Rehno Lindeque,
35
link może pojawić się tylko w HEAD
Knu
18
Pracowałem dla mnie tylko wtedy, gdy to zrobiłem ...document.head.appendChild(cssLink)- Firefox i Safari.
mojuba
24
Czy to faktycznie działa między domenami? Nie sądzę, żeby tak było.
Simon East
89
Tylko dlatego, że nikt inny nie musi tego przetestować, aby się przekonać: poprawne, nie działa w wielu domenach. Natychmiast po wykonaniu ramek [„name”] pojawia się komunikat „Niebezpieczna próba dostępu JavaScript do ramki z URL bla z ramki z URL bla. Domeny, protokoły i porty muszą się zgadzać”.
Kevin
205

Ten problem spotkałem w Kalendarzu Google . Chciałem nadać mu styl na ciemniejszym tle i zmienić czcionkę.

Na szczęście adres URL z kodu do osadzenia nie miał ograniczeń bezpośredniego dostępu, więc przy użyciu funkcji PHP file_get_contents można uzyskać całą zawartość ze strony. Zamiast wywoływać adres URL Google, można wywołać plik php znajdujący się na serwerze, np. google.php, który będzie zawierał oryginalną treść z modyfikacjami:

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

Dodawanie ścieżki do arkusza stylów:

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

(Spowoduje to umieszczenie arkusza stylów na końcu tuż przed headtagiem końcowym).

Podaj podstawowy adres URL z oryginalnego adresu URL, jeśli css i js są nazywane względnie:

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

Ostateczny google.phpplik powinien wyglądać następująco:

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

Następnie zmieniasz iframekod do umieszczenia na:

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

Powodzenia!

SequenceDigitale.com
źródło
71
Możesz nazwać to hakowanie z definicji, jeśli chcesz. Ale nie zaproponowałeś lepszego rozwiązania ... To rozwiązanie nie jest sposobem na zniszczenie usługi Google lub oszukiwanie ludzi w celu wykorzystania ich słabości.
SequenceDigitale.com
5
Zabiłbym za sposób, aby to rozwiązanie działało z dokumentami Google. Zgłasza wszelkiego rodzaju błędy javascript. „Uncaught TypeError: Nie można odczytać właściwości„ a ”niezdefiniowanej”
deweydb
1
Nieważne, wymyśliłem to, opublikowałem rozwiązanie tutaj: stackoverflow.com/questions/25395279/…
deweydb
9
@ChrisHoughton FYI, w zasadzie tak nie jest. Może to jednak sprawić, że cały iframe stanie się bezcelowy (na przykład jednym z powodów użycia iframe jest ze względów bezpieczeństwa, np. Przy płatnościach kartą, a jeśli zrobisz to, co tutaj sugerujesz, prawdopodobnie spowodujesz sobie problemy).
alastair
10
Robiąc to, zawsze otrzymujesz kalendarz jako użytkownik niezalogowany. Przy normalnym iframe HTML użytkownik zobaczyłby swój osobisty kalendarz, gdyby był zalogowany w Google, ale ponieważ kod PHP nie zna identyfikatora sesji Google użytkownika, nie może pobrać swojego osobistego kalendarza.
bdsl
72

Jeśli zawartość iframe nie jest całkowicie pod twoją kontrolą lub chcesz uzyskać dostęp do zawartości z różnych stron w różnych stylach, możesz spróbować manipulować nią za pomocą 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);

Pamiętaj, że w zależności od używanej przeglądarki może to działać tylko na stronach obsługiwanych z tej samej domeny.

Horst Gutmann
źródło
82
Warto zauważyć, że te same zasady pochodzenia przestaną działać, jeśli strona jest w innej domenie.
ConroyP
2
W tym samym myśleniu, ale bardziej zwięźle: <iframe onload="this.contentDocument.body.style.overflow='hidden';" />
Obrońca
Nawet Firefox przeszedł na CORS
59
var $head = $("#eFormIFrame").contents().find("head");

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));
Rami Sarieddine
źródło
@deweydb użyłem go z iframe między domenami. ale mogę tylko błagać o twoje przebaczenie!
Rami Sarieddine
@ramie i przetestowałeś to w wielu przeglądarkach? większość przeglądarek zgłasza błąd bezpieczeństwa.
deweydb
Widziałem ten pomysł wcześniej, ale dodaj link do pliku, który jest naprawdę świetny i profesjonalny ... + w górę
J.Tural
29

Ramka iframe jest obsługiwana przez większość przeglądarek jak inna strona HTML. Jeśli chcesz zastosować ten sam arkusz stylów do treści ramki iframe, po prostu odwołaj się do niej na stronach tam używanych.

hangy
źródło
22
@hangry ale ... jak?
Dziecko Boże
29

Oto jak zastosować kod CSS bezpośrednio, bez <link>konieczności ładowania dodatkowego arkusza stylów.

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

Ukrywa to baner na stronie iframe. Dziękuję za sugestie!

domih
źródło
1
Czy to wymaga iframe o id iframe?
Jeremy
1
@jmalais Wystarczy wymienić #iframez #<id>lub nawet iframe, aby zaznaczyć wszystkie iframes
Zeb McCorkle
3
To chyba nie działa dla mnie. Element iframe, który próbuję edytować, również nie ma głowy bezpośrednio pod nim w domenie. Czy to oznacza, że ​​muszę uzyskać dostęp do nagłówka w dokumencie HTML, czy też jest to coś, co funkcja znajdowania jquery powinna sama zrobić?
David A. Francuski
1
Sprawdziłem konsolę i wygląda na to, że nie można uzyskać dostępu do zawartości iframe z powodu niedopasowania domeny. Obecnie używam Chrome i hostuję moje środowisko programistyczne lokalnie.
David A. French
Niezabezpieczony DOMException: Zablokowałem ramkę z początkiem, daje mi ten błąd
priyanka patel
26

Jeśli kontrolujesz stronę w ramce iframe, jak to powiedziano, najłatwiejszym sposobem jest utworzenie udostępnionego pliku CSS o wspólnych stylach, a następnie po prostu link do niego ze stron HTML.

W przeciwnym razie jest mało prawdopodobne, że będziesz w stanie dynamicznie zmieniać styl strony ze strony zewnętrznej w swoim ramce iframe. Wynika to z faktu, że przeglądarki zaostrzyły zabezpieczenia skryptów między ramkami z powodu możliwego niewłaściwego użycia do fałszowania i innych włamań.

Ten samouczek może dostarczyć więcej informacji na temat skryptu iframe w ogóle. Informacje o skryptach między ramkami wyjaśniają ograniczenia bezpieczeństwa z perspektywy IE.

Popiół
źródło
19

Powyższe z niewielką zmianą działa:

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

Działa dobrze z ff3 i ie8 co najmniej

Eric
źródło
7
Co to jest myData i skąd pochodzi
Tigran
1
@Tigran to jestdynamic data
Akash
13

Jeśli chcesz ponownie użyć CSS i JavaScript ze strony głównej, może powinieneś rozważyć zastąpienie <IFRAME>treści załadowanej Ajax. Jest to bardziej przyjazne SEO teraz, gdy boty wyszukiwania mogą wykonywać JavaScript.

To jest przykład jQuery, który zawiera inną stronę HTML w twoim dokumencie. Jest to o wiele bardziej przyjazne SEO niż iframe. Aby mieć pewność, że boty nie indeksują dołączonej strony, po prostu dodaj ją, aby zabronić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>

Możesz także dołączyć jQuery bezpośrednio z Google: http://code.google.com/apis/ajaxlibs/documentation/ - oznacza to opcjonalne automatyczne dołączanie nowszych wersji i znaczny wzrost prędkości. Oznacza to również, że musisz im zaufać, że dostarczył ci tylko jQuery;)

sorin
źródło
1
Należy zauważyć, że to rozwiązanie nie działa, jeśli zawartość strony jest w jakikolwiek sposób dynamiczna.
nickdnk
12

Poniższe działało dla mnie.

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();
Piotr
źródło
1
Błąd:Uncaught TypeError: Cannot read property 'open' of undefined
KingRider,
10

Rozszerzenie powyższego rozwiązania jQuery, aby poradzić sobie z opóźnieniami w ładowaniu zawartości ramki.

$('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();
});
David Bradshaw
źródło
1
„$ This” musi być „$ (this)”, aby działało. Fajnie, kiedy to robi :)
h.coates
9

Moja wersja kompaktowa :

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

Czasami jednak iframenie jest gotowy na załadowane okno, więc konieczne jest użycie timera .

Gotowy do użycia kod (z timerem):

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

... i link jQuery:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
Zbigniew Wiadro
źródło
8

Inne odpowiedzi tutaj wykorzystują łącza jQuery i CSS.

Ten kod używa waniliowego JavaScript. Tworzy nowy <style>element. Ustawia zawartość tekstową tego elementu jako ciąg znaków zawierający nowy CSS. I dołącza ten element bezpośrednio do głowy dokumentu 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);
2540625
źródło
7

Kiedy powiesz „doc.open ()”, oznacza to, że możesz napisać dowolny tag HTML wewnątrz iframe, więc powinieneś napisać wszystkie podstawowe tagi dla strony HTML, a jeśli chcesz mieć link CSS w głowie iframe, po prostu napisz iframe z linkiem CSS. Dam ci przykład:

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();
Parham fazel
źródło
7

użyj może spróbować tego:

$('iframe').load( function() {
     $('iframe').contents().find("head")
     .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
  });
Ajay Malhotra
źródło
3
Jeśli ramka iframe pochodzi z innego źródła, mechanizm CORS nie pozwoli na to obejście.
Pan Anderson,
Co jeśli iframe-url jest włączony CORS dla wszystkich lokalizacji?
adrhc
6

W ten sposób nie będziesz mógł stylizować zawartości iframe. Moją sugestią byłoby użycie skryptów na serwerze (PHP, ASP lub skrypt Perla) lub znalezienie usługi online, która przekonwertuje kanał na kod JavaScript. Jedynym innym sposobem, aby to zrobić, jest wykonanie włączenia serwera.

Peter Mortensen
źródło
29
Ostrożnie, gdy mówisz, że czegoś nie da się zrobić, gdy w rzeczywistości jest to po prostu trudne
Lathan
4

Jeśli masz dostęp do strony iframe i chcesz zastosować inny CSS tylko wtedy, gdy załadujesz ją za pomocą iframe na swojej stronie, tutaj znalazłem rozwiązanie dla tego rodzaju rzeczy

działa to nawet wtedy, gdy iframe ładuje inną domenę

sprawdź o postMessage()

plan jest, wyślij css do iframe jako wiadomość typu

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

* jest wysłanie tej wiadomości bez względu na domenę w ramce iframe

i odbierać wiadomość w ramce iframe i dodawać otrzymaną wiadomość (CSS) do tego nagłówka dokumentu.

kod do dodania na stronie iframe

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

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

});
CodeRows
źródło
4

Ponieważ wiele odpowiedzi jest napisanych dla tych samych domen, napiszę, jak to zrobić w wielu domenach.

Najpierw musisz znać API Post Message . Potrzebujemy komunikatora do komunikacji między dwoma oknami.

Oto posłaniec, którego stworzyłem.

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

}

Wykorzystanie tego w dwóch oknach do komunikacji może rozwiązać Twój problem.

W głównych oknach

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

Następnie otrzymaj zdarzenie z iframe.

W ramce 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);
    }
})

Aby uzyskać więcej informacji, zobacz Kompletny samouczek Javascript i iframes .

Supun Kavinda
źródło
3

Znalazłem inne rozwiązanie, aby umieścić styl w głównym html w ten sposób

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

a następnie zrób to w iframe (zobacz onloads js)

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

i w js

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

To może nie być najlepsze rozwiązanie i na pewno można je ulepszyć, ale jest to kolejna opcja, jeśli chcesz zachować znacznik „style” w oknie nadrzędnym

jperelli
źródło
3

W domenie są dwie rzeczy

  1. Sekcja iFrame
  2. Strona załadowana do ramki iFrame

Więc chcesz stylizować te dwie sekcje w następujący sposób,

1. Styl sekcji iFrame

Może stylizować za pomocą CSS o tym szacunku idlub classnazwie. Możesz po prostu stylizować go również w nadrzędnych arkuszach stylów.

<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. Styl strony ładowanej w ramce iFrame

Te style można załadować ze strony nadrzędnej za pomocą Javascript

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

następnie ustaw ten plik CSS na odpowiednią sekcję iFrame

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

Tutaj możesz edytować Główną część strony wewnątrz iFrame, również w ten sposób

var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead.append(
   $("<link/>",{ 
      rel: "stylesheet", 
      href: urlPath, 
      type: "text/css" }
     ));
K.Suthagar
źródło
2

Możemy wstawić znacznik stylu do iframe. Wysłano również tutaj ...

<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>
Palanikumar
źródło
1
To nie działa Wygląda na to, aby wstawić tag stylu poprawnie, ale nie ma w nim treści ani identyfikatora.
darylknight
2

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

Jeeva
źródło
1
Sprawdziłem tę odpowiedź wiele razy, co richTextFieldtu jest ?
Kirankumar Dafda,
1
to nazwa iframe
Jeeva
Nie próbowałem, ale myślę, że nie, bo to przeciwko piaskownicy
Jeeva,
1

Myślę, że najprościej jest dodać kolejny div, w tym samym miejscu co iframe

uczyń go z-indexwiększym niż kontener iframe, abyś mógł łatwo zaprojektować własny div. Jeśli chcesz go kliknąć, po prostu użyjpointer-events:none własnego diva, aby iframe działał na wypadek, gdybyś musiał go kliknąć;)

Mam nadzieję, że to komuś pomoże;)

Mateusz Winnicki
źródło
1

Jest wspaniały skrypt, który zastępuje węzeł samą wersją iframe. CodePen Demo

wprowadź opis zdjęcia tutaj

Przykłady użycia:

// 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">'
});
karlisup
źródło
1
Dlaczego chcesz to zrobić ?!
Dylan Watson
0

To tylko koncepcja, ale nie wdrażaj jej bez kontroli bezpieczeństwa i filtrowania! W przeciwnym razie skrypt może włamać się do Twojej witryny!

Odpowiedź: jeśli kontrolujesz witrynę docelową, możesz skonfigurować skrypt odbiorcy w następujący sposób:

1) ustaw link iframe za pomocą styleparametru, na przykład:

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

(ostatnia fraza jest a{color:red} kodowana przez urlencodefunkcję.

2) ustaw stronę odbiorcy w target.phpnastępujący sposób:

<head>
..........
$col = FILTER_VAR(SANITIZE_STRING, $_GET['color']);
<style>.xyz{color: <?php echo (in_array( $col, ['red','yellow','green'])?  $col : "black") ;?> } </style>
..........
T.Todua
źródło
3
Ostrzeżenie: jest to zastrzyk w najlepszym wydaniu.
kano
1
tak, NIE rób tego, poza tym, że chcesz mieć
mnóstwo
1
Zaktualizowałem odpowiedź teraz, dodając ostrzeżenie dotyczące bezpieczeństwa
T.Todua
-18

Cóż, wykonałem następujące kroki:

  1. Div z klasą do utrzymania iframe
  2. Dodaj iframedo div.
  3. W pliku CSS
divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

Działa to w IE 6. Powinien działać w innych przeglądarkach, sprawdź!

JannuD
źródło
9
trzeba kontrolować div wewnątrz iframe, to nie ma
MSD