Czy iframe są uważane za „złą praktykę”? [Zamknięte]


286

Gdzieś wzdłuż linii zrozumiałem, że używanie iframe jest „złą praktyką”.

Czy to prawda? Jakie są zalety / wady korzystania z nich?

Odpowiedzi:


217

Podobnie jak w przypadku wszystkich technologii, ma swoje wzloty i upadki. Jeśli używasz iframe do poruszania się po prawidłowo opracowanej stronie, to oczywiście zła praktyka. Jednak czasami iframe jest akceptowalny.

Jeden z głównych problemów z ramką iframe dotyczy zakładek i nawigacji. Jeśli używasz go do zwykłego osadzania strony w treści, myślę, że jest w porządku. Po to jest iframe.

Jednak widziałem również nadużycia iframe. Nigdy nie należy go używać jako integralnej części witryny, ale jako element zawartości witryny.

Zwykle, jeśli możesz to zrobić bez ramki iframe, jest to lepsza opcja. Jestem pewien, że inni tutaj mogą mieć więcej informacji lub bardziej konkretne przykłady, wszystko sprowadza się do problemu, który próbujesz rozwiązać.

To powiedziawszy, jeśli jesteś ograniczony do HTML i nie masz dostępu do backendu takiego jak PHP lub ASP.NET itp., Czasami iframe jest twoją jedyną opcją.


23
„jeśli jesteś ograniczony do HTML i nie masz dostępu do zaplecza, takiego jak PHP lub ASP.NET itp., czasami iframe jest twoją jedyną opcją”… to nieprawda. Możesz osadzić zawartość zewnętrzną na swojej stronie, pobierając dane przez jquery ajax, a następnie wypełniając div tymi danymi.
programista747

53
@ developer747 - To nie zadziała, jeśli zawartość zewnętrzna znajduje się w innej witrynie z powodu tej samej zasady pochodzenia . W niektórych niejasnych przypadkach zdalna witryna może obsługiwać JSONP ; ale prawdopodobnie nie.
Peter V. Mørch

2
Wydaje mi się, że ramki iframe są o wiele mniej przydatne niż poprzedni zestaw ramek, ponieważ użytkownik nie może zmienić rozmiaru ramek iframe - ale nie użyłbym zestawu ramek do niczego poza instrukcją, ponieważ nie istnieje on już w HTML5. Przykład: Podręcznik twórcy gry
Domino,

15
Należy wspomnieć, że iframe są obecnie jedynym sposobem na zdefiniowanie zagnieżdżonego zakresu CSS. Izolują wewnętrzny znacznik, układ, styl i JavaScript * od zewnętrznego dokumentu, co jest przydatne w wielu przypadkach użycia i aplikacjach. * JavaScript nie jest izolowany, jeśli dokument wewnętrzny dzieli pochodzenie z dokumentem zewnętrznym; z drugiej strony dokumenty z różnych źródeł mogą się nadal komunikować window.postMessage(), na przykład w celu zaimplementowania automatycznego zmieniania rozmiaru iframe.
Tobia,

1
IFrame Is Evil! może również pomóc
DanielV

75

Nie są złą praktyką, są tylko kolejnym narzędziem i dodają elastyczności.

Do użytku jako standardowy element strony ... są dobre, ponieważ są prostym i niezawodnym sposobem na podzielenie treści na kilka stron. Zwłaszcza w przypadku treści generowanych przez użytkowników przydatne może być „piaskownica” stron wewnętrznych w iframetaki sposób, aby zły kod nie wpływał na stronę główną. Minusem jest to, że jeśli wprowadzisz wiele warstw przewijania (jedna dla przeglądarki, jedna dla iframe), użytkownicy będą sfrustrowani. Jak powiedział Adzm, nie chcesz używać iframedo podstawowej nawigacji, ale pomyśl o nich jako o tekście / znaczniku równoważnym ze sposobem osadzania wideo lub innego pliku multimedialnego.

W przypadku skryptowych zdarzeń w tle wybór zasadniczo obejmuje ukrywanie iframei XmlHttpRequestładowanie treści dla bieżącej strony. Różnica polega na tym, że iframegeneruje ładowanie strony, więc w większości przeglądarek możesz przechodzić do przodu i do tyłu w pamięci podręcznej przeglądarki. Zwróć uwagę, że Google, który używa w XmlHttpRequestdowolnym miejscu, używa również iframes w niektórych przypadkach, aby umożliwić użytkownikowi przejście do poprzedniej i następnej historii przeglądarki.


11
Myślę, że ważne jest, aby wspomnieć, że ramek iframe można użyć do osadzenia strony z domeny na stronie z innej domeny. Jeśli osadzona strona chce śledzić użytkowników za pomocą plików cookie i zachować te informacje z domeny hosta, wówczas jedyną opcją jest użycie elementu iframe, ponieważ JS znajduje się pod kontrolą domeny hosta.
Nicholas Leonard

@NicholasLeonard Dobrym przykładem jest to, że możesz ich użyć do wymuszenia buforowania strony opartego na localstorage, ustawiając stronę indeksu jako skrypt wykrywający, czy podstrona jest w localstorage. Następnie document.write go z magazynu lokalnego, jeśli tam jest, a jeśli nie, dodaj iframe do tej podstrony. Na tej podstronie umieść skrypt do przechowywania elementu zewnętrznego HTML podstron w magazynie lokalnym. NAPRAWDĘ dobrym powodem do użycia tej metody jest to, że pozwala ona dodać na ekranie ładowania.

Nie zgadzam się, ale nie mogę głosować za tym, ponieważ jest to ważny POV.
victorf,

28

„Złą praktyką” jest używanie ich bez zrozumienia ich wad. Stanowisko Adzma bardzo dobrze je podsumowuje.

Z drugiej strony gmail intensywnie wykorzystuje ramki iFrame w tle do niektórych swoich fajniejszych funkcji (takich jak automatyczne przesyłanie plików). Jeśli zdajesz sobie sprawę z ograniczeń iFrame, nie sądzę, że powinieneś odczuwać jakiekolwiek komplikacje podczas ich używania.


18

Pracując z nimi w wielu okolicznościach, naprawdę pomyślałem, że iframe są programistycznym odpowiednikiem instrukcji goto. Oznacza to, że należy na ogół unikać. W obrębie witryny mogą być nieco przydatne. Jednak w przypadku wielu witryn są one prawie zawsze złym pomysłem na coś innego niż najprostszą treść.

Rozważ możliwości ... jeśli są używane do sparametryzowanej zawartości, stworzyli interfejs. A w profesjonalnej witrynie interfejs ten wymaga umowy SLA i zarządzania wersjami - które prawie zawsze są ignorowane w pośpiechu, aby przejść do trybu online.

W przypadku zawartości aktywnej - ramek obsługujących skrypt - istnieją (różne) ograniczenia skryptu między domenami. Niektóre mogą zostać zhakowane, ale rzadko konsekwentnie. A jeśli twoja treść w ramce musi być interaktywna, będzie miała trudności z zrobieniem tego poza ramką.

W przypadku korzystania z licencjonowanych treści strony uczestniczące są obciążone koniecznością przeniesienia informacji o uprawnieniach poza pasmo między hostami.

Tak więc, choć okazjonalnie przydatne w obrębie witryny, raczej nie nadają się do mashupów. O wiele lepiej patrzysz na prawdziwe portale i portlety. Co gorsza, są ulubieńcem każdego amatora sieci - wielu menedżerów technicznych uważa się za rozwiązanie wielu problemów. W rzeczywistości tworzą więcej.


10

Z mojego doświadczenia wynika, że pozytywną stroną iframe jest wywoływanie kodów stron trzecich, co może obejmować wywołanie javascript, który wywołuje a, ma Document.write();polecenie. Jak zapewne wiesz, tych komend nie można wywoływać asynchronicznie ze względu na sposób ich analizy (DOM Parser itp.). Przykładem tego jest http://sourceforge.net/projects/phpadsnew/ Wykorzystałem iframe, aby przyspieszyć naszą stronę, ponieważ było wiele wywołań do phpadsnews, a strona czekała na odpowiedź, zanim zaczęła renderować inaczej części strony. dzięki ramce iframe mogłem pozwolić stronie na renderowanie innych części strony i nadal Document.write()asynchronicznie wywoływać polecenie phpadów. Zapobieganie i blokowanie js.


8

Zdecydowanie istnieją zastosowania dla ludzi iframe. Jak inaczej umieściłbyś widżet sieci pogodowych na swojej stronie? Jedynym innym sposobem jest złapanie ich XML i parsowanie go, ale wtedy oczywiście potrzebujesz warunków, aby rzucić częstą grafikę pogodową ... naprawdę nie warto, ale o wiele czystsze, jeśli masz czas.


6

Oryginalny model zestawu ramek (Frameset i Frame-elements) był bardzo zły z punktu widzenia użyteczności. IFrame jest późniejszym wynalazkiem, który nie miał tylu problemów, co oryginalny model zestawu ramek, ale ma swoją wadę.

Jeśli zezwolisz użytkownikowi na poruszanie się w ramce IFrame, wówczas łącza i zakładki nie będą działać zgodnie z oczekiwaniami (ponieważ zakładka zawiera adres URL strony zewnętrznej, ale nie adres URL ramki iframe).


1
muszę się nie zgodzić ... taki szeroki komentarz w ogóle nie jest kwalifikowany.
Dawesi

5

Gdy Twoja strona główna ładuje się w protokole HTTP, a części strony muszą działać w protokole HTTPS, iFrame może pokonać jsonp.

Zwłaszcza jeśli twój dataType nie jest natywnie jsonem i musi zostać przetłumaczony na serwerze na json i przetłumaczony na kliencie np. Na złożony HTML.

Więc nie - iFrame nie jest zły.


5

Nie są złe, ale w rzeczywistości są pomocne. Jakiś czas temu miałem ogromny problem, kiedy musiałem osadzić mój kanał Twittera i po prostu nie pozwoliłbym md zrobić tego na tej samej stronie, więc ustawiłem go na innej stronie i umieściłem jako iframe.

Są również dobre, ponieważ obsługują je wszystkie przeglądarki (i przeglądarki telefonu). Nie można ich uważać za złą praktykę, o ile prawidłowo się ich używa.


4

Warto zauważyć, że iframe, niezależnie od szybkości połączenia internetowego użytkowników lub zawartości iframe, spowodują niewielkie (około 0,3 s), ale zauważalne spowolnienie szybkości pobierania strony. Nie jest to coś, co zobaczysz podczas testowania go lokalnie. W rzeczywistości dotyczy to każdego elementu dodanego do strony, ale ramki iframe wydają się gorsze.


1
Czemu? Czy to sposób na załadowanie ramek iframe po zakończeniu ładowania strony głównej?
Nicholas Leonard

3
Nie pamiętam, dlaczego są tacy powolni; Badałem to rok temu. Prawdopodobnie dlatego, że przeglądarka zasadniczo tworzy zupełnie nowy kontekst renderowania dla każdego elementu iframe. Jeśli chcesz, aby nie ładowały się, dopóki ładowanie strony nie zostanie zakończone, możesz użyć pustego elementu iframe, a następnie ustawić tag src elementu iframe po zakończeniu ładowania strony. Pamiętaj jednak, że nawet pusta ramka iframe spowolni renderowanie strony, ale nie pobieranie, więc użytkownicy nadal będą wyglądać nieco wolniej.
Brian

3
Wręcz przeciwnie, można rozważyć omówienie CDN (Content Delivery Networks) podczas odwoływania się do prędkości i ramek iFrame. Weź pod uwagę, że iFrame może pobierać zasoby równolegle, a zatem zapewnia zwiększenie prędkości (w zależności od przeglądarki). Oto co najmniej jedno inne odniesienie, które zgadza się z moim stanowiskiem. developer.yahoo.com/performance/rules.html
Strixy

2
@Strixy: Podany adres URL stwierdza, że ​​ramki IFrame są kosztowne, nawet jeśli są puste. Zaleca ograniczenie do minimum użycia ramek IFrame. Korzystanie z sieci CDN w celu przyspieszenia witryny jest prostopadłe do korzystania z ramek IFrame. Sieć CDN może pomóc w zmniejszeniu kosztów korzystania z ramki IFrame. Jednak CDN bez IFrame jest lepszy niż CDN i IFrame.
Brian

1
@Strixy: Jeśli chcesz pobierać zasoby równolegle, istnieją lepsze sposoby na to. Starą gorliwością jest ładowanie tych wszystkich rzeczy za pomocą javascript. Nowością jest użycie pracownika usługi, który skutecznie pozwala bezpośrednio zarządzać sposobem, w jaki klient użytkownika ładuje, wstępnie ładuje i buforuje zasoby witryny przy użyciu logiki po stronie klienta. Innym nowym trendem jest push / http, który umożliwia wysyłanie zasobów do przeglądarki bez czekania, aż się o to poprosi. Ponieważ pamięć podręczna http / 2 jest sprawdzana po innych pamięciach podręcznych przeglądarki, często jest to zły wybór do tego celu.
Brian

3

Widziałem, że IFRAME stosowane były z powodzeniem jako prosty sposób na tworzenie dynamicznych menu kontekstowych, ale docelową grupą docelową tej aplikacji internetowej byli tylko użytkownicy Internet Explorera.

Powiedziałbym, że wszystko zależy od twoich wymagań. Jeśli chcesz mieć pewność, że strona działa równie dobrze w każdej przeglądarce, unikaj ramek IFRAME. Jeśli kierujesz reklamy do wąskiej i dobrze znanej publiczności (np. W lokalnym intranecie) i widzisz korzyści z używania ramek IFRAME, powiedziałbym, że jest to w porządku.

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.