Jak ostylować kod wewnątrz iframe?
Czy da się jakoś nadpisać style css elementu, który znajduje się w ramce (iframe)?
5 Odpowiedzi
Style css muszą pochodzić ze źródła, z którego pochodzi cały kod iframe. Tak więc musisz skontaktować się z właścicielem serwera. Jeśli to jakiś program partnerski, czasami w panelu można dodawać style.
Jeśli na swojej stronie internetowej masz kod iframe, musisz mieć dostęp do źródła tego iframe.
Ja miałem iframe z jakiegoś programu partnerskiego, chyba to było coś modowego, za żadne skarby nie dało się zmienić styli wewnątrz tego iframe.
Jeśli iframe masz w ramach tej samej strony na której stykujesz, spokojnie możesz w stylach CSS dodać kod.
To zależy od tego, skąd pochodzi iframe – czy to twoja domena, czy externa.
Jeśli iframe jest z TWOJEJ domeny (ta sama domena): Tak, możesz stylować zawartość iframe z poziomu JavaScript:
javascript
<code class="language-javascript"><span class="token">var</span> iframe <span class="token">=</span> <span class="token dom">document</span><span class="token">.</span><span class="token method property-access">getElementById</span><span class="token">(</span><span class="token">'mojIframe'</span><span class="token">)</span><span class="token">;</span> <span class="token">var</span> iframeDoc <span class="token">=</span> iframe<span class="token">.</span><span class="token property-access">contentDocument</span> <span class="token">||</span> iframe<span class="token">.</span><span class="token property-access">contentWindow</span><span class="token">.</span><span class="token property-access">document</span><span class="token">;</span> iframeDoc<span class="token">.</span><span class="token property-access">body</span><span class="token">.</span><span class="token property-access">style</span><span class="token">.</span><span class="token property-access">backgroundColor</span> <span class="token">=</span> <span class="token">'red'</span><span class="token">;</span></code>
Albo dodać cały arkusz stylów:
javascript
<code class="language-javascript"><span class="token">var</span> style <span class="token">=</span> iframeDoc<span class="token">.</span><span class="token method property-access">createElement</span><span class="token">(</span><span class="token">'style'</span><span class="token">)</span><span class="token">;</span>
style<span class="token">.</span><span class="token property-access">textContent</span> <span class="token">=</span> <span class="token">'.moja-klasa { color: blue; }'</span><span class="token">;</span>
iframeDoc<span class="token">.</span><span class="token property-access">head</span><span class="token">.</span><span class="token method property-access">appendChild</span><span class="token">(</span>style<span class="token">)</span><span class="token">;</span></code>
Jeśli iframe jest z ZEWNĘTRZNEJ domeny (np. YouTube, Facebook): NIE DA SIĘ – to jest zablokowane przez politykę Same-Origin Policy (zabezpieczenie przeglądarek). Nie możesz ingerować w zawartość iframe z innej domeny ze względów bezpieczeństwa.
Obejścia (ograniczone):
- Stylować sam kontener iframe (ramkę) – tak, to działa normalnie
- Użyć
postMessage()do komunikacji między domenami (jeśli masz kontrolę nad zawartością iframe) - Dla YT/Vimeo – użyć ich API do customizacji
Podsumowanie:
- Ta sama domena → TAK, JS + CSS
- Inna domena → NIE (blokada bezpieczeństwa)
Trochę mijasz się z prawdą..