2014-04-20 16 views
21

OK, więc szukam dobrych powodów, aby nie używać iFrame w treści strony. Mój znajomy, który jest skonfigurowany na używanie iFrame do naszego czatu i ładowanie strony html zamiast po prostu używać ajax do załadowania parametrów, które są potrzebne i długo odpytywania żądania. Gdy mamy już nasze parametry, uzupełniamy zawartość o kilka elementów div.Dobre powody, dla których nie należy korzystać z elementów iframe w treści strony


moich największych powodów

  1. Dlaczego obciążenie dwóch stron jednocześnie

  2. Więcej kodowanie jest potrzebne, aby wstrzyknąć do iFrame

Czy ktoś zna jakieś inne możliwe konflikty i problemy, które współ u potencjalnie powstają? Wiem, że jakiś czas temu, że iFrames miały zostać uznane za przestarzałe, wskoczyli z powrotem na strony internetowe.


ps I nie był pewien, czy powinno to iść w SO lub MSO razie potrzeby mogę przenieść go

Odpowiedz

38

Źródło: http://www.rwblackburn.com/2012/07/iframe-evil/

Wydaje się więc, że każda praca Pracuję na ten sam temat wyjdzie. Ktoś w pewnym momencie powie: "po prostu użyj do tego elementu iFrame". Potem muszę zejść ze starej zmęczonej drogi, dlaczego nie byłby to dobry pomysł.

Cóż, ten artykuł będzie dla mnie trochę utylitarny. Mam nadzieję, że odejdę w jednym miejscu z wszystkich powodów, dla których iFrames nie są rozwiązaniami, które pozwolą mi zaoszczędzić trochę czasu w przyszłości i po prostu kierują ludzi do tego adresu URL. W związku z tym mogę aktualizować ten post z czasem, gdy poprawię te punkty. Jeśli chcesz, możesz użyć tego posta w tym samym celu i zamieścić dowolne sugestie lub punkty, które przegapiłem na koncie twitter (@rwbDev), na pewno napiszę, jeśli dodaję punkt do tego artykułu.

Teraz, pozwól mi być jasne. iFrames mają ważny cel. Sam wielokrotnie korzystałem z iFrame z wielkim sukcesem. Problem polega na tym, że ludzie zwykle chcą z nich korzystać, aby obejść słabą architekturę lub po prostu naprawić problem. Z mojego doświadczenia wynika, że ​​zazwyczaj sprzedaje się niewielki problem w przypadku znacznie większego problemu na drodze, a najczęściej jest to niepotrzebny kompromis. Omówię oba poniższe punkty.

Złe dla SEO. Jest to jeden z najczęstszych powodów, dla których należy unikać elementów iFrame. Niektóre wyszukiwarki mogą mieć trudności ze stronami przywoływanymi w ramach iFrame. To, jak wpływa to na ranking witryny lub strony, nie jest w pełni znane. Jednak większość ekspertów, z którymi rozmawiałem, zgadza się, że ma to jakiś wpływ. Sprawdź ten interesujący post na tropiku. Aby poznać szczegóły na temat tego, jak działa SEO i wpływ takich decyzji dotyczących projektowania, proponuję sprawdzić stronę seomoz.org.To oczywiście nie jest problemem, jeśli SEO nie jest problemem dla twojej strony lub aplikacji. Na przykład aplikacja, która wymaga logowania (wszystkie strony za loginem nie są dostępne dla wyszukiwarek). * Uwaga (dodane 6 czerwca 2013 r.): Najnowsze testy wykazały, że wyszukiwarki mogą w rzeczywistości podążać za linkami w ramach iFrame. Oznacza to, że wpływ iFrame na SEO jest znacznie mniejszy niż w przeszłości. Wciąż nie jest jasne, czy nie ma żadnego wpływu, a różne wyszukiwarki mogą zachowywać się inaczej w tym zakresie.

Łączenie/Zakładki. Jeśli nie wprowadzisz dodatkowego kodu JavaScript, użytkownik nie będzie mógł uzyskać linku bezpośrednio do treści w ramach iFrame. Obejmuje to linki do znajomych, zakładek lub stron wyświetlanych w wynikach wyszukiwania. Wyobraź sobie, że Twój użytkownik odwiedza Twoją stronę, a niektóre treści znajdują się w ramce iFrame. Klikają łącze w treści iFramed. Ta zawartość pozostanie w ramach iFrame zgodnie z oczekiwaniami. Teraz Twoi użytkownicy znajdują treści, do których nawigowali w ramach iFrame i chcą wysłać je do znajomego. Kopiowanie adresu URL w przeglądarce nie będzie jednak działało, co spowoduje wysłanie znajomego na początkową stronę z oryginalną treścią wyświetlaną w iFrame. Istnieją skrypty, które mogą ominąć to. Zaimplementowałem je sam kilka razy (w sytuacjach, w których nie miałem wyboru). Jednak te często wprowadzają niektóre z ich własnych problemów i często mają problemy z kompatybilnością z różnymi przeglądarkami. Często jest to również buggy w prawo. Ponownie, w zależności od Twojej witryny lub potrzeb aplikacji, może to nie być problem, ale jest to duży problem dla większości witryn.

Trudności z debugowaniem. To jest ten, który ludzie często przeoczyli. Jeśli masz solidną aplikację ze złożonymi jQuery, Ajax i inne fajne rzeczy dziejące się na całej stronie - iFrames może znacznie utrudnić debugowanie problemu. Czy błąd występuje na stronie zewnętrznej lub stronie w ramce? Narzędzia programistyczne przeglądarki mogą w tym pomóc, ale nawet te narzędzia nie zawsze wyjaśniają, gdzie jest problem, gdy mamy do czynienia z iFrame. Byłbyś zaskoczony, jak często błąd można replikować, gdy strona znajduje się w ramce iFrame, ale działa poprawnie po załadowaniu poza ramkę iFrame. Jest to problem dotyczący dowolnej witryny. Ale szczególnie w przypadku witryn, które w znacznym stopniu korzystają z iFrame. Im więcej ruchomych części znajduje się w systemie, tym trudniej jest zdiagnozować problem.

Brak rzeczywistych wzrostów wydajności. Raz na jakiś czas znajdę kogoś, kto chce korzystać z iFrame, ponieważ uważają, że zwiększy to wydajność witryny. Zazwyczaj czują się w ten sposób, ponieważ unikają konieczności ponownego ładowania nagłówka/stopki/menu witryny za każdym razem, gdy strona się stroni. Częściej niż nie, odwrotnie jest prawdą. Z mojego doświadczenia wynika, że ​​nigdy nie przyniosło to poprawy wydajności w porównaniu do architektury aplikacji. Po pierwsze, należy wziąć pod uwagę, że przeglądarki będą buforować obrazy, pliki CSS i JS. Tak więc nie będą one ładowane z każdą stroną w żaden sposób. Ale co ważniejsze, ludzie, którzy myślą w tym kierunku, często patrzą na iFrame, jak na AJAX biedaka. Jednak zawartość stronicowania iFrame prawie zawsze będzie cięższa niż prawdziwe wywołanie AJAX, które używa XML lub JSON do ładowania i odświeżania tylko niewielkiej części zawartości strony.

Po prostu trudno utrzymać stabilność. Istnieje duża strona z mojej poprzedniej pracy, która szeroko wykorzystywała iFrame. Nie jestem pewien, gdzie ma tu zastosowanie NDA, więc nie będę linkować do ich witryny tylko po to, aby być bezpiecznym. Używają ich często i mają wszystkie skrypty i fantazyjne sztuczki używane (teoretycznie) do uniknięcia normalnych wad korzystania z iFrame. Nadal jednak pojawiają się częste problemy i błędy, które pojawiają się na ich stronach ze względu na nadmierne niewłaściwe użycie i nadużywanie iFrame. Były również częste skargi klientów zamieszczane na forach, LinkedIn, Twitterze, itd. Na temat problemu, który ich spowodował. Właśnie przeskoczyłem do ich strony i po kilku minutach znalazłem stronę, która spowodowała błąd z powodu problemu iFrame. To są inteligentni ludzie, którzy dobrze znają problemy z iFrames. Jednak nawet po wielu latach nadal się z tym zmagają. Kiedy iFrames są nadużywane, tak jak są na tej stronie, żadna ilość fantazyjnych skryptów w pełni nie rozwiąże problemów, które nieuchronnie się pojawią.

2

iframe dodać elastyczność w kontekście widoku jak oni to prosty i niezawodny sposób w celu oddzielenia treści na kilka stron. może to również być przydatne do "piaskowania" wewnętrznych stron w elemencie iframe, więc słaby/brakujący znacznik nie wpłynie na stronę główną.

Wadą jest to, że jeśli wprowadzisz wiele warstw przewijania (jeden dla przeglądarki, jeden dla elementu iframe), użytkownicy będą sfrustrowani.

+2

To i dodaje czas ładowania strony, a istnieje wiele innych sposobów dostarczania treści, takich jak 'DIV's nie ma żadnego prawdziwego dobrego celu, poza tym, że metoda ta używa Facebooka jako. Poza tym prawdziwy programista na swojej stronie internetowej nie powinien używać ramki iFrame. Proszę przeczytać zaakceptowaną odpowiedź – EasyBB

+0

@ EasyBB Muszę się nie zgodzić. Dlaczego Facebook jest jedynym podmiotem, który dostaje przepustkę? Jeśli znaleźli odpowiednie zastosowanie, z pewnością inni "prawdziwi programiści" mogą znaleźć całkowicie akceptowalny powód, aby używać także iframe. – ryandlf

+0

Wierzę, że brakuje ci punktu i pomysłowości całej odpowiedzi. Używają go, używają Twittera, a także innych. ale nie przepełniają strony przewijaniem. Używają prostego przycisku lub innych podobnych rzeczy. Więc nie sądzę, żebyś naprawdę wiedział, co masz na myśli. – EasyBB

1

Niektóre przeglądarki nie obsługują iFrames, w iFrame, Twoja witryna może zawierać treści z innej zawartości witryny, ale treść może się zmienić w dowolnym momencie, do materiałów, które możesz zatwierdzić lub nie. Niektóre problemy lubić Kosztowne, nawet jeśli puste. Bloki strona remianing onload, że jest niepożądany, a nie semantyczny

Nie można uzyskać CSS do współpracy pomiędzy IFRAME i strony nadrzędnej, chyba że sterowanie stylesheets themselves.As wymienionych powyżej prawdą jest, że-

Nie możemy uzyskać dobrej wydajności za pomocą I Frame. Niektóre wyszukiwarki mogą mieć trudności ze stronami wymienionymi w ramach i Frames. To, jak wpływa to na ranking witryny lub strony, nie jest w pełni znane. Moja sugestia polega na tym, aby najpierw użyć wszystkich innych opcji. Nie przeskakuj do rozwiązania iFrame, ponieważ wydaje się łatwe na powierzchni.

+0

Och, nigdy nie używam iFrames haha. Wolałbym długo odpytywać żądanie ajaxowe i dostarczać zawartość w div. Element semantyczny, który znajduje się na stronie. – EasyBB

+0

jeszcze jedno, iframe setTimeout() nie działa w przeglądarce Internet Explorer 9! –

0

Źródło: Iframes Use or Not and its Alternatives

Ważnymi powodami są:

  • wolniej wydajność.
  • Iframes blok onload wydarzenie.
    Zdarzenie onload jest najczęściej używane przez twórców stron internetowych do inicjowania działań interfejsu użytkownika, takich jak skupienie się na polach logowania przy obciążeniu.
Powiązane problemy