HTML5 i frameborder


83

Mam element iframe w dokumencie HTML5. kiedy sprawdzam poprawność, pojawia się błąd informujący mnie, że atrybut w atrybucie iframe frameBorderjest przestarzały i że zamiast tego używam CSS.

Mam tutaj ten atrybut frameBorder="0", ponieważ był to jedyny sposób, w jaki mogłem dowiedzieć się, jak pozbyć się granicy w IE, próbowałem border:none;w CSS bez powodzenia. Czy istnieje zgodny sposób, aby to naprawić?

Dzięki.

Odpowiedzi:


60

HTML 5 nie obsługuje atrybutów, takich jak frameborder, scrolling, marginwidth i marginheight (które były obsługiwane w HTML 4.01). Zamiast tego specyfikacja HTML 5 wprowadziła atrybut seamless. Atrybut seamless sprawia, że ​​ramka wbudowana wygląda tak, jakby była renderowana jako część dokumentu zawierającego. Na przykład nie pojawią się obramowania i paski przewijania.

Według MDN

frameborder Przestarzałe od HTML5

Wartość 1(domyślna) rysuje obramowanie wokół tej ramki. Wartość 0usuwa obramowanie wokół tej ramki, ale zamiast tego powinieneś używać obramowania właściwości CSS do kontrolowania granic.

Jak mówi powyższy cytat, powinieneś usunąć obramowanie za pomocą CSS;
albo inline ( style="border: none;") albo w twoim arkuszu stylów ( iframe { border: none; }).

Biorąc to pod uwagę, wydaje się, że nie ma ani jednego dostawcy iframe, który by nie używał frameborder="0". Nawet YouTube nadal używa tego atrybutu, a nawet nie zapewnia atrybutu stylu, który sprawiłby, że ramki iframe byłyby wstecznie zgodne, gdy ramka ramki nie są już obsługiwane. Można śmiało powiedzieć, że atrybut nigdzie się nie zmieni. To pozostawia Ci 3 opcje:

  1. Używaj dalej frameborder, aby mieć pewność, że działa (na razie)
  2. Użyj CSS, aby zrobić „właściwą” rzecz
  3. Używać obu. Chociaż nie rozwiązuje to problemu niekompatybilności (podobnie jak opcja 1), działa i będzie działać w każdej przeglądarce, która była i będzie

Jeśli chodzi o poprzedni stan tej sprzed dziesięciu lat odpowiedzi:

seamlessAtrybut został wsparty na tak krótkim czasie (lub w ogóle przez niektórych przeglądarkach), że nawet nie MDN listy jako przestarzała funkcja. Nie używaj go i nie daj się zmylić poniższymi komentarzami.


31
Czy jest więc sposób na wygenerowanie frameBorder = 0 w CSS?
JD Isaacks

1
To naprawdę denerwujące, używam najnowszego Chrome i po prostu nie działa. Chociaż frameborder = "0" tak.
RGBK

1
wracając do tego, bezproblemowa działa na Chrome FF i Safari. Umieść go w
ramce

9
Twój powinien być używany border-width: 0px;, ale obawiam się, że nie jest to kompatybilne z różnymi przeglądarkami iframes. seamlessnadal nie jest obsługiwany przez wszystkie przeglądarki! To jeden z nielicznych problemów HTML5, które musisz po prostu zaakceptować. Użyj frameborder="0"i do diabła z walidacją!
Solomon Closson,

2
seamlesszostał usunięty ze specyfikacji HTML5, więc nigdy nie będzie dla niego obsługiwany. Odpowiedź @ ForTheWatch jest teraz najlepsza.
rvighne

48

Podobnie jak w przypadku innych postów tutaj , najlepszym rozwiązaniem jest użycie wpisu CSS

style="border:0;"

6
Myślę, że polecają: border-width: 0pxTBH. border: none;nie będzie działać.
Solomon Closson,

5
@ cnotethegr8 - Nie działa w IE i Opera (aktualna wersja), nie testowano w Chrome, Safari i / lub Firefox. Testuję pod kątem kiepskich przeglądarek, bo jeśli to w nich działa, to prawie na pewno zadziała w innych.
Solomon Closson

2
@SolomonClosson I test for the crappy browsers, because if it works in them, than it is almost sure to work in the others.Mój Boże, ten naiwny. Jeśli chcesz mieć pewność, że Twoja aplikacja działa w przeglądarce, musisz przetestować ją w tej przeglądarce, prosto i prosto. Nie ma żadnych gwarancji, tylko dziwactwa.
Jonathan Dumaine

1
Szybka uwaga jest taka, że ​​jednostka w 0px jest zbędna. Wolę margines: 0; lub border: 0; ponieważ 0px == 0em == 0% == 0 jeśli chodzi o CSS.
csharpforevermore

1
Teraz, seamlessgdy zostało usunięte ze specyfikacji, jest to jedyna poprawna odpowiedź
rvighne

17

Ponieważ frameborderatrybut jest potrzebny tylko w IE, istnieje inny sposób obejścia walidatora. Jest to lekki sposób, który nie wymaga Javascript ani żadnej manipulacji DOM.

<!--[if IE]>
   <iframe src="source" frameborder="0">?</iframe>
<![endif]-->
<!--[if !IE]>-->
   <iframe src="source" style="border:none">?</iframe>
<!-- <![endif]-->

3
To najlepsza odpowiedź na zadane pytanie. Jednak cel zgodności z HTML5 (który jest w toku i może i ulegnie zmianie bez powiadomienia) nie jest przydatny, zwłaszcza gdy sprawia, że ​​używasz sztuczek, które nie służą żadnemu innemu celowi niż taka zgodność i które sprawiają, że kod jest bardziej skomplikowany . Najlepiej jest nadal używać, frameBorder="0"jeśli nie chcesz, aby obramowanie wokół ramki wbudowanej.
Jukka K. Korpela

Absolutnie prawdziwe. Chcę tylko zauważyć, że ponieważ atrybut frameborder jest czysto prezentacyjny, nie ma dużej szansy, że kiedykolwiek powróci do standardu HTML, niezależnie od tego, jak bardzo się on zmienia.
Pan Lister


@ JukkaK.Korpela Czekaj, co? Więc dlaczego OP miałby otrzymać błąd walidacji? Och, przepraszam, strona, do której prowadzi link, dotyczy framei framesetnie iframe. Atrybut jest przestarzały w iframeelemencie; patrz w3.org/TR/html5/obsolete.html#attr-iframe-frameborder
Mr Lister

Wystąpił błąd walidacji, ponieważ funkcja została uznana za przestarzałą, co tak naprawdę nie oznacza nic więcej niż wysłanie wiadomości. Atrybut jest nadal zdefiniowany w HTML5 i zgodnie z HTML5 CR oczekuje się, że przeglądarki będą go nadal obsługiwać.
Jukka K. Korpela


2

A co powiesz na użycie tego samego dla techniki „oszukiwania” walidatora za pomocą JavaScript poprzez umieszczenie atrybutu target w XHTML <a onclick="this.target='_blank'">?

  • onsomething = "this.frameborder = '0'"

<iframe onload = " this.frameborder='0' " src="menu.html" id="menu"> </iframe>

Czy getElementsByTagName]("iframe")1 dodajesz ten atrybut do wszystkich ramek iframe na stronie?

Nie testowałem tego, ponieważ zrobiłem coś, co oznacza, że nic nie działa w IE mniej niż 9! :) Więc kiedy ja to rozwiązuję ... :)


0

Znalazłem fajną pracę, która pozwoli mu działać w IE7 tutaj . Pomija walidator dla atrybutu frameBorder, ale zachowuje css dla przyszłych przeglądarek, jak wyjaśniono w poście.


użyć JavaScript do wygenerowania elementu iframe? dodatkowo opóźni czas ładowania zawartości iframe tylko po to, aby wyeliminować ostrzeżenie CSS. Jak mówi zaakceptowana odpowiedź, zaleca się użycie seamlessatrybutu.
Raptor

Tak, jednak bezproblemowy nie działał dla mnie w IE7, stąd mój post.
sareed

-5
style="border:none; scrolling:no; frameborder:0;  marginheight:0; marginwidth:0; "

11
Dlaczego warto: to jest nieprawidłowy kod. scrolling, frameborder, marginheight / width nie są właściwościami CSS.
Patrik Affentranger
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.