2010-09-18 9 views
29

szukam jakiegoś alternatywnego sposób zrobić:Nie ma atrybut „allowtransparency”

<iframe transparency=true ... 

Kiedy zrobić walidację W3C, otrzymuję błąd:

Column 31: there is no attribute "allowtransparency" 

Jeśli stosowanie tego CSS,

dla powyższego fragmentu Otrzymuję pustą ramkę iframe.

Odpowiedz

31

Chociaż prawdą jest, że specyfikacja HTML W3C nie definiuje go, istnieje atrybut allowTransparency i jest on obsługiwany przez wszystkie nowoczesne przeglądarki (i Internet Explorer). Jak uczył nas HTML5, wózek powinien znajdować się przed koniem.

Załóżmy, że masz ten kod HTML na swojej stronie głównej index.html:

<html> 
    <body> 
     <iframe src="source.html" 
       allowTransparency="true" 
       style="background-color:lightgreen;" 
       width="400" height="200"> 
     </iframe> 
    </body> 
</html> 

A twój source.html wygląda następująco:

<html> 
    <body> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, magna 
      id bibendum sollicitudin, tellus tortor consequat enim, et mollis mauris 
      augue et dui. </p> 
    </body> 
</html> 

Po otwarciu strony głównej (indeks. html) w przeglądarce, zobaczysz tekst z source.html w elemencie iframe, ale będzie on miał jasnozielone tło.

(Testowane z Safari, Firefox i Chrome na Mac OS X i Internet Explorer 8 i Chrome w systemie Windows XP)

EDIT: Najważniejsze jest to: strona źródłowa nie może ustawić swoje własne tło. Jeśli tak, ignoruje przezroczyste tło.

+1

Ten atrybut może nie być tak powszechne, jak myślisz, czy widziałeś, czy rzeczywiście zmieniło zachowanie w przeglądarkach innych niż IE? O ile mogę powiedzieć, jest to specyficzny atrybut IE, a inne przeglądarki domyślnie dopuszczają przezroczystość iframe i po prostu ignorują ten atrybut. –

+0

Odzyskaj moją odpowiedź. Odpowiedź na twoje pytanie już tam jest. –

+0

@ james.garriss Czytam ci odpowiedź i piszesz, że wszystkie przeglądarki obsługują ten atrybut, a nie jego funkcjonalność. Przeglądarki inne niż Internet Explorer zachowują się jak Internet Explorer (najwyraźniej zachowuje się 8 i mniej) (jeśli atrybut jest dla niego ustawiony), nawet jeśli atrybut nie jest dla nich ustawiony. Wygląda na to, że Chrome nie obsługuje właściwości DOM. Jak myślisz, co dokładnie obsługuje? – PhistucK

12

Nie jestem pewien, co starasz się zrobić tutaj, ale to powinno być to, czego szukasz:

iframe { 
    background-color: transparent; 
} 

To jest, oczywiście, przy założeniu, że chcesz tło do iframe być przezroczyste.

1
  1. Nie ma atrybut HTML nazwany transparency, więc będziesz zawsze się błąd z iframe transparency=true

  2. jeśli ustawić krycie do zera, nie będzie widać element w ogóle - trzeba aby określić stopień krycia:

    opacity: 0.25; /* all modern browsers */ 
    filter: alpha(opacity=25) /* IE */ 
    

powyższy CSS (Uwaga: wartości kryjące są 0-100 dla IE, 0-1 dla innych przeglądarek) pozwoli innym elementom za (np. obraz tła strony), aby pokazać, nawet jeśli element z ustawieniem krycia ma kolorowe tło.

Aby uzyskać większą kontrolę nad przezroczystością, zobacz RGBA (A = alpha), ale uważaj na obsługę zmiennych przeglądarki.

+0

w IE, mój iframe idzie przejrzyste, ale jest to nie mogę w stanie zobaczyć moją zawartość wewnątrz iframe także .. – Bharanikumar

+0

Czy możesz przygotować próbną stronę? Jeśli zawartość elementu iframe jest całkowicie niewidoczna, to domyślam się (nie widząc), że albo: nie otrzymuje treści elementu iframe, zawartość dziedziczy inne ustawienie CSS, albo (oczywiste, ale warte sprawdzenia) właściwość koloru jest taka sama jak kolor tła. Ustaw kolor na czerwony i usuń regułę krycia - czy nadal się nie wyświetla? –

1

Po pierwsze, nie ma czegoś takiego jak "transparency =" true "", więc to nie zadziała.

Po drugie, czy próbujesz uczynić przezroczyste tło lub całą ramkę iframe?

Własność CSS Opacity sprawia, że ​​wszystko wewnątrz dowolnego elementu, którego używasz, jest przezroczyste. Krycie krycia od 0 do 1, gdzie 0 jest całkowicie przezroczyste, 0,5 jest w połowie przezroczyste, a 1 jest całkowicie widoczne.

Jeśli użyjesz tego elementu div lub iframe (lub cokolwiek innego), tło i tekst będą jednakowo wyblakłe.

Z drugiej strony, w każdej nowoczesnej przeglądarce można ustawić backround, aby był częściowo przezroczysty za pomocą kolorów RGBA. Należy to zrobić tak: definicja kolor

iframe.transparent { 
    background-color: #FFF; /*this gives a background color for browsers that can't do RGBA color, like internet explorer*/ 
    background-color: rgba(255,255,255,0.5); 
} 

RGBA działa podobnie jak atrybut krycia (0 = jasny, 1 = stałych), oprócz tego, że tylko sprawia, że ​​specyficzna pozycja zostanie ustawiona na przejrzyste i nie wpływa elementy wewnątrz tego elementu (tj. nie ma wpływu na tekst wewnątrz twojego elementu iframe). Pierwsze trzy cyfry to czerwone, zielone i niebieskie wartości twojego koloru w skali od 0 do 255.

Jeśli jednak chcesz mieć lepsze rozwiązanie dla różnych przeglądarek, polecam użycie przezroczystego pliku .png plik jako obraz tła.Będziesz musiał przetestować to na IE, nie wiesz, czy będzie działać specjalnie dla elementu iframe, ale nie możesz ustawić żadnego tła w elemencie iframe, a następnie ustawić przezroczysty obraz jako tło strony ładowanej wewnątrz elementu iframe (zastosuj to do elementu body dla tej strony).

Mam nadzieję, że to pomoże!

+0

to jest zmiana, jak dla ciebie powyżej próbki, ale nadal nie ma aktualizacji, w IE mój ifram jest biały, ale strona jest czarna BG – Bharanikumar

+0

Czy możesz udostępnić link do strony, nad którą pracujesz, więc mogę rzucić okiem na cały kod? – Andrew

3

Istnieje sposób można to zrobić z jQuery, jeśli włączone plik jQuery -

<!--[if lt IE 9]><script> $(".classname").attr("allowTransparency", "true"); </script><![endif]--> 

Zmień .nazwaklasy do Twojego iframe lub zrobić jeden, jeśli nie jest jeden. (Usuń także atrybut z elementu iframe) Umieść to bezpośrednio za tagiem zamykającym iframe i dodaje wymagany znacznik allowTransparency dla przeglądarek przed IE9. Jak to jest w warstwie warunkowej IE, nie jest czytane przez walidator W3C. Eliminuje to również kompatybilność z przeglądarkami i ukrywanie treści przy dodawaniu wszystkich CSS, o których już wspomniano, jeśli używasz najnowszej wersji jQuery. Atrybut allowTransparency został utworzony z jasno określonym celem, więc nie ma sensu próbować odtworzyć go za pomocą CSS, kiedy możesz po prostu wstawić go po cichu. Mam nadzieję, że to pomoże komuś!

(Metoda ta zakłada, masz już iframe {background-color:transparent} który nie działa na starszych wersjach IE)

+0

+1 za rzeczywistą próbę dostarczenia alternatywnej metody, o którą prosiłaś. Tak naprawdę tego nie próbowałem. –

+4

Nie ma potrzeby angażowania jQuery tutaj. To wystarcza: document.getElementById ("yourframeid"). AllowTransparency = true; – tomg

+0

Aby zacytować "** jeśli ** masz to zainstalowane". Nie powiedziałem, że musisz to zainstalować, aby to zrobić. Jeśli nie, to zgadzam się, że Twoja droga byłaby lepsza. –

Powiązane problemy