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?
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:
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:
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”
@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.
@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.
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!
@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ń.
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 thisvar 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);
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
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;)
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.
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:
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.
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.
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
*/classCrossMessenger{/**
*
* @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 namevar 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(typeofthis.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 =newCrossMessenger(iframe.contentWindow,"https://iframe.s.domain");var cssContent =Array.prototype.map.call(yourCSSElement.sheet.cssRules, css_text).join('\n');
msger.post("cssContent",{
css: cssContent
})
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
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><iframename='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"}));
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ąć;)
Odpowiedzi:
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:
Styl strony osadzonej w elemencie iframe należy ustawić, umieszczając go na stronie podrzędnej:
Lub można go załadować ze strony nadrzędnej za pomocą Javascript:
źródło
document.getElementById("myframe").contentDocument
. Osadzanie css nadal nie działa dla mnie....document.head.appendChild(cssLink)
- Firefox i Safari.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:Dodawanie ścieżki do arkusza stylów:
(Spowoduje to umieszczenie arkusza stylów na końcu tuż przed
head
tagiem końcowym).Podaj podstawowy adres URL z oryginalnego adresu URL, jeśli css i js są nazywane względnie:
Ostateczny
google.php
plik powinien wyglądać następująco:Następnie zmieniasz
iframe
kod do umieszczenia na:Powodzenia!
źródło
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.
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.
źródło
<iframe onload="this.contentDocument.body.style.overflow='hidden';" />
źródło
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.
źródło
Oto jak zastosować kod CSS bezpośrednio, bez
<link>
konieczności ładowania dodatkowego arkusza stylów.Ukrywa to baner na stronie iframe. Dziękuję za sugestie!
źródło
iframe
?#iframe
z#<id>
lub nawetiframe
, aby zaznaczyć wszystkieiframe
sJeś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.
źródło
Powyższe z niewielką zmianą działa:
Działa dobrze z ff3 i ie8 co najmniej
źródło
dynamic data
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
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;)
źródło
Poniższe działało dla mnie.
źródło
Uncaught TypeError: Cannot read property 'open' of undefined
Rozszerzenie powyższego rozwiązania jQuery, aby poradzić sobie z opóźnieniami w ładowaniu zawartości ramki.
źródło
Moja wersja kompaktowa :
Czasami jednak
iframe
nie jest gotowy na załadowane okno, więc konieczne jest użycie timera .Gotowy do użycia kod (z timerem):
... i link jQuery:
źródło
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.źródło
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:
źródło
użyj może spróbować tego:
źródło
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.
źródło
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
*
jest wysłanie tej wiadomości bez względu na domenę w ramce iframei odbierać wiadomość w ramce iframe i dodawać otrzymaną wiadomość (CSS) do tego nagłówka dokumentu.
kod do dodania na stronie iframe
źródło
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.
Wykorzystanie tego w dwóch oknach do komunikacji może rozwiązać Twój problem.
W głównych oknach
Następnie otrzymaj zdarzenie z iframe.
W ramce iframe:
Aby uzyskać więcej informacji, zobacz Kompletny samouczek Javascript i iframes .
źródło
Znalazłem inne rozwiązanie, aby umieścić styl w głównym html w ten sposób
a następnie zrób to w iframe (zobacz onloads js)
i w js
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
źródło
W domenie są dwie rzeczy
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
id
lubclass
nazwie. Możesz po prostu stylizować go również w nadrzędnych arkuszach stylów.2. Styl strony ładowanej w ramce iFrame
Te style można załadować ze strony nadrzędnej za pomocą Javascript
następnie ustaw ten plik CSS na odpowiednią sekcję iFrame
Tutaj możesz edytować Główną część strony wewnątrz iFrame, również w ten sposób
źródło
Możemy wstawić znacznik stylu do iframe. Wysłano również tutaj ...
źródło
źródło
richTextField
tu jest ?Myślę, że najprościej jest dodać kolejny div, w tym samym miejscu co iframe
uczyń go
z-index
wię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;)
źródło
Jest wspaniały skrypt, który zastępuje węzeł samą wersją iframe. CodePen Demo
Przykłady użycia:
źródło
Alternatywnie możesz użyć technologii CSS-in-JS, jak poniżej lib:
https://github.com/cssobj/cssobj
Może dynamicznie wstrzykiwać obiekt JS jako CSS do iframe
źródło
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ą
style
parametru, na przykład:(ostatnia fraza jest
a{color:red}
kodowana przezurlencode
funkcję.2) ustaw stronę odbiorcy w
target.php
następujący sposób:źródło
Cóż, wykonałem następujące kroki:
iframe
iframe
dodiv
.Działa to w IE 6. Powinien działać w innych przeglądarkach, sprawdź!
źródło