Zastąp styl treści dla treści w elemencie iframe

Jak mogę kontrolować obraz tła i kolor elementu body w elemencie iframe? Zauważ, że osadzony element body ma klasę, a iframejest strony, która jest częścią mojej witryny.

Potrzebuję tego, ponieważ moja witryna ma czarne tło przypisane do treści, a następnie białe tło przypisane do elementów div zawierających tekst. Edytor WYSIWYG używa znaku iframedo osadzania treści podczas edycji, ale nie zawiera elementu div, więc tekst jest bardzo trudny do odczytania.

Treść iframewhen w edytorze ma klasę, która nie jest używana nigdzie indziej, więc zakładam, że została tam umieszczona, aby można było rozwiązać takie problemy. Jednak kiedy stosuję style class.body, nie zastępują one stylów zastosowanych do ciała. Dziwne jest to, że style pojawiają się w Firebug, więc nie mam pojęcia, co się dzieje!

Dzięki

UPDATE - wypróbowałem rozwiązanie @ mikeq polegające na dodaniu stylu do klasy, która jest klasą ciała. To nie działa po dodaniu do arkusza stylów strony głównej, ale działa po dodaniu z Firebug. Zakładam, że dzieje się tak, ponieważ Firebug jest stosowany do wszystkich elementów na stronie, podczas gdy CSS nie jest stosowany w ramkach iframe. Czy to oznacza, że ​​dodanie css po załadowaniu okna z JavaScriptem zadziała?

Element iframe to „dziura” na stronie, w której jest wyświetlana inna strona internetowa. Zawartość elementu iframe nie ma żadnego kształtu ani nie stanowi części strony nadrzędnej.

Jak powiedzieli inni, dostępne opcje to:

• nadaj plikowi ładowanemu do elementu iframe niezbędny kod CSS
• jeśli plik w elemencie iframe pochodzi z tej samej domeny co Twój element nadrzędny, możesz uzyskać dostęp do DOM dokumentu w elemencie iframe z elementu nadrzędnego.

Poniższe działa tylko wtedy, gdy zawartość iframe pochodzi z tej samej domeny nadrzędnej.

U mnie działa następujący skrypt jquery. Przetestowano w Chrome i IE8. Wewnętrzna ramka iframe odwołuje się do strony znajdującej się w tej samej domenie co strona nadrzędna.

W tym konkretnym przypadku ukrywam element z określoną klasą w wewnętrznym iframe.

Po prostu dodajesz element „style” do „głowy” wewnętrznej ramki iframe.

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

Nie możesz zmienić stylu strony wyświetlanej w elemencie iframe, chyba że masz bezpośredni dostęp, a zatem jesteś właścicielem źródłowych plików html i / lub css.

Ma to na celu zatrzymanie XSS (Cross Site Scripting)

An iframema inny zakres, więc nie możesz uzyskać do niego dostępu do stylu lub zmiany jego zawartości za pomocą javascript.

Zasadniczo jest to „inna strona”.

Jedyne, co możesz zrobić, to edytować własny CSS, ponieważ z globalnym CSS nie możesz nic zrobić.

Zastąp kod CSS innej domeny iframe

Korzystając z części odpowiedzi SimpleSam5 , osiągnąłem to dzięki kilku elementom iframe czatu Tawk (ich interfejs dostosowywania jest w porządku, ale potrzebowałem dalszych dostosowań).

W tym konkretnym elemencie iframe, który pojawia się na urządzeniach mobilnych, musiałem ukryć domyślną ikonę i umieścić jeden z moich obrazów tła. Zrobiłem co następuje:

Tawk_API.onLoad = function() {
// without a specific API, you may try a similar load function
// perhaps with a setTimeout to ensure the iframe's content is fully loaded
  $('#mtawkchat-minified-iframe-element').
    contents().find("head").append(
     $("<style type='text/css'>"+
       "#tawkchat-status-text-container {"+
         "background: url(https://example.net/img/my_mobile_bg.png) no-repeat center center blue;"+
         "background-size: 100%;"+
       "} "+
       "#tawkchat-status-icon {display:none} </style>")
   );
};

Nie posiadam żadnej domeny Tawk i to zadziałało dla mnie, więc możesz to zrobić, nawet jeśli nie pochodzi z tej samej domeny nadrzędnej (pomimo komentarza Jeremy'ego Beckera na temat odpowiedzi Sama).

Ten kod wykorzystuje zwykły 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 nagłówka dokumentu iframe.

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  'body {' +
  '  background-color: some-color;' +
  '  background-image: some-image;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);

Jeśli masz kontrolę nad stroną hostującą element iframe i stroną elementu iframe, możesz przekazać parametr zapytania do elementu iframe ...

Oto przykład dodawania klasy do elementu iframe na podstawie tego, czy witryna hostingowa jest mobilna ...

Dodawanie iFrame:

var isMobile=$("mobile").length; //detect if page is mobile
var iFrameUrl ="https://myiframesite/?isMobile=" + isMobile; 

$(body).append("<div id='wrapper'><iframe src=''></iframe></div>");
$("#wrapper iframe").attr("src", iFrameUrl ); 

Wewnątrz elementu iFrame:

//add mobile class if needed
var url = new URL(window.location.href);
var isMobile = url.searchParams.get("isMobile");
if(isMobile == "1") {
    $("body").addClass("mobile");
}

Prowadzę bloga i miałem wiele problemów ze znalezieniem sposobu zmiany rozmiaru osadzonej treści. Menedżer postów pozwala tylko na pisanie tekstu, umieszczanie obrazów i osadzanie kodu HTML. Układ bloga sam w sobie jest responsywny. Jest zbudowany za pomocą Wix. Jednak osadzony HTML nie jest. Dużo czytałem o tym, jak niemożliwa jest zmiana rozmiaru komponentów wewnątrz treści generowanych ramek iFrame. Oto moja sugestia:

Jeśli masz tylko jeden komponent w swoim elemencie iFrame, tj. Swoją treść, możesz zmienić rozmiar tylko sedna. Zapomnij o iFrame.

Miałem problemy z widocznym obszarem, specyficznymi układami dla różnych programów użytkownika i to rozwiązało mój problem:

<script language="javascript" type="text/javascript" src="https://gist.github.com/roliveiravictor/447f994a82238247f83919e75e391c6f.js"></script>

<script language="javascript" type="text/javascript">

function windowSize() {
  let gist = document.querySelector('#gist92442763');

  let isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent)
    },
    BlackBerry: function() {
        return /BlackBerry/i.test(navigator.userAgent)
    },
    iOS: function() {
        return /iPhone|iPod/i.test(navigator.userAgent)
    },
    Opera: function() {
        return /Opera Mini/i.test(navigator.userAgent)
    },
    Windows: function() {
        return /IEMobile/i.test(navigator.userAgent) || /WPDesktop/i.test(navigator.userAgent)
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

  if(isMobile.any()) {
    gist.style.width = "36%";
    gist.style.WebkitOverflowScrolling = "touch"
    gist.style.position = "absolute"
  } else {
    gist.style.width = "auto !important";
  }
}

windowSize();

window.addEventListener('onresize', function() {
    windowSize();
});

</script>

<style type="text/css">

.gist-data {
  max-height: 300px;
}

.gist-meta {
  display: none;
}

</style>

Logika polega na ustawieniu gist (lub twojego komponentu) css na podstawie agenta użytkownika. Upewnij się, że najpierw zidentyfikowałeś swój komponent, zanim zastosujesz go do selektora zapytania. Zapraszam do obejrzenia, jak działa responsywność .

Być może teraz się to zmieniło, ale użyłem osobnego arkusza stylów z tym elementem:

.feedEkList iframe
{
max-width: 435px!important;
width: 435px!important;
height: 320px!important;
}

aby z powodzeniem stylizować osadzone elementy iframe youtube ... zobacz posty na blogu na tej stronie .

nadaj treści swojej strony iframe identyfikator (lub klasę, jeśli chcesz)

<html>
<head></head>
<body id="myId">
</body>
</html>

następnie, również na stronie elementu iframe, przypisz mu tło w CSS

#myId {
    background-color: white;
}