Czy ramki iFrame (HTML) są przestarzałe? [Zamknięte]


90

Otrzymując sprzeczne informacje na ten temat, mam nadzieję, że tak nie jest. Nie wyobrażam sobie, by wsparcie to ustało, ponieważ korzysta z nich miliard witryn.

Kilka dodatkowych pytań na ten temat:

  1. Dlaczego powinni wycofać ten tag?
  2. Jakaś alternatywa dla tego?

Odpowiedzi:


53

Moim zdaniem W3C podskoczyło w zrzucaniu ramek iframe ze Strict HTML i XHTML doctypes. Teoretycznie <object>użyłbyś tego elementu do dodania obcych obiektów do twojego dokumentu, ale różnice i ograniczenia przeglądarki sprawiły, że wielu programistów nie zaczęło tego robić. Dzięki znacznie bardziej pragmatycznemu HTML 5 (który wciąż jest szkicem), elementy iframe powróciły i mają nawet dwa nowe atrybuty: seamlessi intrygujący sandbox.


Świetnie, mam tylko nadzieję, że przeglądarki zaczną obsługiwać przesyłanie plików AJAX, więc nie musimy do tego używać elementów iframe ani Flash.
Xeoncross


2
Aktualizacja: atrybut semless został usunięty z html5. Zobacz: caniuse.com/#feat=iframe-se Seamless
Gabe

76

Wsparcie dla <iframe>jest nadal dostępne w HTML 5, więc nie sądzę, żeby to się zmieniło w najbliższej przyszłości.

Aby odpowiedzieć na inne pytania:

  1. <iframe>s (jak ogólnie ramki) są przez większość czasu nieprzyjazne dla użytkownika:
    • Nie pozwalają na łatwy dostęp do treści w ramce poprzez adres URL (bez utraty przynajmniej treści poza ramką).
    • Większość użytkowników „technofobów” irytuje ramki.
    • O ile wiem, wolniej renderują się w przeglądarkach
  2. Alternatywy obejmują dynamiczne generowanie stron (SSI, PHP, Rails itd.) I używanie JavaScript / AJAX do zmiany zawartości np. <div>

Żeby było jasne: mówię o <iframe>elemencie interfejsu. Nie jest to ukryty element do ładowania innych rzeczy, jak np. Google Mail.


29
+1 za punkt, w którym Google używa ramek iframe do wysoce specjalistycznych celów.
cgp

25

Ramki iframe są przestarzałe w układzie strony. Nigdy nie używaj ich zamiast dobrego układu CSS, nawet układ tabelaryczny jest lepszy.

Dobre powody, dla których warto używać ramek iframe:

  • reklamy : na przykład adwords korzysta z tej techniki, jest ona dobra do hermetyzacji - css reklam nie zniszczy Twojej strony.
  • ukryta ramka iframe : może być używana do setek użytecznych rzeczy, takich jak śledzenie, alternatywa dla AJAX, itp.

35
*** NIE używaj ramek iframe dla adwords, jest to naruszenie Warunków korzystania z usługi. *** scribd.com/doc/97655/…
cgp

37
altCognito: AdWords używa iframe, nie ja :) Nie chodziło mi o umieszczenie elementu iframe adword w innym iframe.
Thinker

7
Wiem, że to powszechny błąd (stąd wszystkie artykuły), więc chciałem go oznaczyć, aby upewnić się, że ludzie zrozumieli, co mówisz.
cgp

5
Ramki iFrame są niezbędne, gdy zawierają skomplikowaną zawartość, która musi być udostępniona z innej domeny i nie mogą być modyfikowane za pomocą kodu CSS lub JS bieżącej strony.
vsync,

4
To, o czym mówisz, nie ma nic wspólnego z ramkami iframe. Chodzi o to, że używasz elementu iframe, aby wprowadzić zagnieżdżony, zewnętrzny kontekst przeglądania. Nie używasz go do „układu strony”. Jeśli potrzebuję zagnieżdżonego kontekstu przeglądania - jak na świecie użyłbym „dobrego układu CSS”? To nie ma sensu.
Chris B

24

Ramki iFrame nie są przestarzałe, ale powody ich używania są rzadkie.

Powody używania ramek iframe:

  • Świetnie nadaje się do odgradzania rzeczy innych ludzi z innych domen, ale nie integruje się płynnie. (arkusze stylów, javascript itp ...)
  • Integrację multimediów można czasami wykonać łatwiej za pomocą elementu iframe, a nie za pomocą tagu embed.
  • Naprawdę, naprawdę wyspecjalizowane przypadki, takie jak przypadek Gmaila, w którym używają go do zarządzania dźwiękami i historią.

Odpowiedziałbym również, że nie ma potrzeby usuwania iframe, to potrzebny tag i będzie przez jakiś czas.


12

Widziałem wiele forów, które sugerowały tag Object jako zamiennik dla IFrame, który prawdopodobnie działa w większości przypadków.

Na przykład, miałem plik PDF wyświetlany w ramce iFrame (ponieważ na stronie były inne rzeczy, które musieliśmy pokazać poza tylko plikiem PDF) i udało mi się sprawić, że będzie dobrze wyświetlany za pomocą Object.

Co było:

<iframe id="confirmed_pdf" class="current_pdf" src="/prescriptions/show_pdf?id=123" height="570" width="480"></iframe>

Stał się:

<object id="confirmed_pdf" class="current_pdf" data="/prescriptions/show_pdf?id=123" type="application/pdf" height="570" width="480">
  <p>[Show this message if displaying the PDF did not work]</p>
</object>

Jednak Object nie był odpowiednim zamiennikiem, aby spełnić wymóg drukowania TYLKO części strony w formacie PDF.

Ramka iFrame jest jak własne okno na stronie (w zasadzie jest to okno w oknie), a gdy już otrzymasz obiekt window, możesz wywołać na nim .print (), na przykład:

jQuery("#confirmed_pdf").contentWindow.print();

IFrame ma właściwość contentWindow, dzięki czemu możliwe jest drukowanie tylko tej części. Obiekt nie ma właściwości contentWindow, więc nie ma możliwości wydrukowania tylko sekcji strony.

Wygląda więc na to, że jeśli używasz tylko iFrame do wyświetlenia czegoś, zamiast tego można użyć innych tagów, takich jak Object. Ale jeśli musisz w określony sposób wchodzić w interakcję z zawartością ramki iFrame, może być konieczne użycie ramki iFrame.


7

Ramki iFrame są często używane w AJAX. Na przykład Gmail używa, jak sądzę, dziewięciu ukrytych ramek IFrame.


5
Naliczyłem pięć ramek iframe. Jeden nie jest ukryty, a właściwie jeden z nich to prawie cały widok. Ramki iFrame nie są zwykle używane z Ajaxem (w każdym razie nie w żadnej z głównych platform). Gmail używa ramek iframe do takich celów, jak: śledzenie historii, dźwięk (nieparzyste) i jakieś rysunki na płótnie.
cgp

Właśnie przeszedłem przez artykuł, który przeczytałem kilka lat temu.
John Topley,

7

IFrame nie są martwe, ale Frameset / Frames umierają.

W ostatnich dwóch wersjach IE (IE7 / IE8) powiększanie ramek (nie ramek iFrame) przyniosło katastrofalne skutki.

Jak najbardziej używaj ramek iFrame, ale IMHO trzymaj się z daleka od ramek / ramek.


5

W mojej poprzedniej firmie udostępnialiśmy hostowaną aplikację, którą klienci integrowali z własnymi witrynami internetowymi. Czasami używali do tego ramek iFrame, dopasowując naszą hostowaną stronę do ich istniejących projektów. Czasami było to nawet robione bezproblemowo (tj. Ramka iFrame nie miała obramowań ani pasków przewijania, po prostu wyglądała jak część strony). Uznałem, że to dobre użycie tagu.


Ramki iframe są niezbędne do radzenia sobie z rzeczami, które należy umieścić w witrynach klientów z własnym stylem i JavaScript, aby kod użytkownika nie zepsuł się. CSS można łatwo nadpisać, a JS może czasami powodować konflikty (w rzadkich przypadkach), więc najlepiej jest zastosować podejście „systemu zamkniętego”.
vsync

5

W pewnych okolicznościach mogą być niezwykle przydatne, ale są one ograniczone. W szczególności osadzanie wspólnych funkcji w wielu witrynach.

Na przykład mam klienta, który prowadzi kilka witryn e-commerce z towarami szkockimi. W ramach tego opracowaliśmy kilka prostych aplikacji do znajdowania możliwych nazw klanów na podstawie twojego nazwiska lub twojego wyboru tartanów (chichot, jeśli chcesz, ale tartany są warte 700 milionów dolarów rocznie dla naszej gospodarki). Baza danych, która za tym stoi, jest zaskakująco duża (prawie dziesięć tysięcy wierszy w podstawowych tabelach nazw i tartanów) i dość regularnie aktualizowana.

Mamy więc aplikacje skonfigurowane do działania w jednej witrynie, a następnie osadzone w innych naszych witrynach za pomocą ramki iframe, umożliwiającej proste przekazywanie parametrów javascript, dzięki czemu możemy zintegrować wybór tartanu lub klanu z funkcjonalnością witryny osadzającej. Element iframe jest ustawiony jako noneorder, więc użytkownik końcowy wydaje się całkowicie bezproblemowy.

Oczywiście można to zrobić na inne sposoby, ale użycie elementu iframe jest proste i niezawodne. I na pewno nie jest przestarzały.


5

Konie na kursy ... <iframe> są jak wszystko inne ... w odpowiednim celu są właściwym narzędziem; w złym celu są brzydkim hackiem lub gorzej.

W Ajax, <div> są często bardziej odpowiednim kontenerem. W niektórych miejscach działanie polegające na rozpowszechnianiu treści zewnętrznych w ramach własnej witryny, jak jest obsługiwane przez <iframe> s, jest niewłaściwe.

Mój zespół użył kiedyś elementu <iframe> jako idealnego sposobu na zapewnienie użytkownikom dostępu do historii e-maili w formacie HTML - e-maile były kompletnymi stronami <html>, które chcieliśmy łatwo wstawić do naszego szablonu internetowego. <iframe> były absolutnie idealne do prezentowania tych danych] '.

Z drugiej strony, elementy <iframe> powinny prawie zawsze być usuwane lub wyłączane w każdej treści przesłanej przez użytkownika, która jest przesyłana z powrotem do witryny, ponieważ w tym kontekście stanowią one poważny problem z bezpieczeństwem.


4

Specyfikacja gadżetu Google opiera się obecnie na ramkach iframe: http://code.google.com/apis/gadgets/docs/spec.html

Obecnie są to jedyny prosty sposób na zapewnienie izolacji aplikacji javascript, które są pobierane z wielu domen / dostawców.

Również wiele widżetów, które ludzie umieszczają w swoich witrynach internetowych od stron trzecich, używa ramek iframe.

Chociaż mają swoje wady, elementy iframe stanowią pragmatyczne rozwiązanie typowych problemów w sieci. Musiałbym zgadywać, że będą w pobliżu przez jakiś czas.


2

Właśnie zmieniłem witrynę z normalnego zestawu ramek na ramki iframe, ponieważ zwykłe ramki nie mogły zrobić tego, czego potrzebowałem. Nie spowodowało to żadnych problemów z pozostałą częścią kodu.


2

Problemy ze zgodnością i bezpieczeństwem mogą również skłonić Cię do korzystania z ramek iframe; Wózki na zakupy to popularne implementacje oparte na ramkach iFrame, gdy chcesz wizualnie włączyć koszyk jako część niektórych stron internetowych bez ponoszenia pełnej odpowiedzialności za stronę przetwarzania płatności.

Często dostarczamy iframe, aby zintegrować nasze rzeczy eCommerce i klientów, którzy lubią to, jak to może być pod klucz.


0

Pracuję dla firmy, która używa ramek do wszystkiego, od rozwijanych menu, list, bloków treści, itp., Tylko po to, aby pokryć zawiłości formularzy internetowych .net. Aplikacja działa bardzo wolno i działa tylko w przeglądarce IE. Nie rób tego.

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.