Dla mnie iframe to czyste zło (no może nie tak czyste). Wydaje się, że sprawiają wiele kłopotów. Tak, cała witryna zostanie załadowana raz, a następnie możesz załadować tylko pojedyncze strony. Ale ludzie wymyślili w tym celu AJAX.
Jednym z największych problemów, które znalazłem, iframe
było to, że nie mogłem wkleić linku do jednej z podstron, ponieważ adres URL nigdy się nie zmienił (tak, wiem, że jest na to obejście). Po drugie, wyszukiwarki internetowe mogą mieć problemy z poprawnym indeksowaniem tych witryn.
Czasami dostępność tych stron jest gorsza, a niektóre przeglądarki mogą nawet wyświetlać je nieprawidłowo.
Istnieją lepsze sposoby projektowania układu bez (i) ramek. Codziennie widzę, jak ktoś zadaje na SO pytania, na przykład „Jak uzyskać dostęp do iframe za pomocą jQuery?”.
Jakie są więc zalety ramek iframe? Jaki może być powód, aby nadal ich używać? Chciałbym tylko wiedzieć, dlaczego :)
(ponieważ to nie jest prawdziwe pytanie, to CW)
Odpowiedzi:
Przychodzą mi do głowy 2 powody (w tej chwili), dla których ludzie nadal używaliby ramek iframe zamiast AJAX:
1) Ramki iframe omijają zasady dotyczące źródeł międzydomenowych (obrazy, skrypty i style nie). Może to być przydatne do względnie bezpiecznego pobierania witryn / treści z innych nazw domen. Zasadniczo daje to tę zaletę, że jest w stanie wizualnie wyświetlać dane z innych domen, nie pozwalając im tupać po całej stronie z nieograniczonym dostępem (tak jak byłoby to w stanie zrobić JSONP).
2) Możesz załadować wiele typów zasobów z elementu iframe, a nie tylko niektóre typy MIME (jesteś stosunkowo ograniczony do application / javascript, application / x-javascript, text / css, text / xml, image / png, image / jpeg, image / gif ze skryptami, XHR, obrazami i źródłami). Na przykład, jeśli chcę pokazać plik PDF, mogę otworzyć ramkę iframe i pozwolić wtyczce Adobe Reader pokazać ten plik. Ponadto w tej samej domenie, jeśli chcę potokować skrypt, styl i obraz razem (w wierszu na stronie, obraz musiałby być identyfikatorem URI danych), mogę to zrobić za pomocą elementu iframe (i jeśli jest w tym samym domena, port i protokół, do którego mam również dostęp za pomocą JavaScript).
Czy wiesz, że Gmail to zestaw ramek iframe? Widoczna część to po prostu sprytne ustawienie. Ponadto wiele implementacji protokołu OAuth (Twitter, Facebook, Google, Yahoo!) zwykle używa ramek iframe do kojarzenia użytkownika w swojej domenie z adresem URL pomyślnego uwierzytelnienia (po zalogowaniu się użytkownika).
źródło
<embed src="http://www.pdf995.com/samples/pdf.pdf" type="application/pdf">
Ramki iFRAME służą do osadzania i izolowania zawartości stron trzecich w witrynie.
Większość rozwiązań reklamowych w sieci opiera się na elementach iframe - ponieważ zapewniają one bezpieczeństwo (politykę międzydomenową) i izolowany prostokąt na ekranie, którym można w pełni zarządzać za pomocą treści i skryptów stron trzecich (częstym przypadkiem użycia są reklamy).
Innym nowoczesnym zastosowaniem IFRAMES jest zarządzanie historią (wspólne obejście przycisku Wstecz) aplikacji AJAX.
RAMKI to kiepska wersja IFRAMES. Ich użycie spada.
źródło
Jeśli użytkownik ma wyłączony javascript, ramki iframe będą działać, gdy Ajax nie. Nie jest to wykluczone, biorąc pod uwagę, że ludzie używają rzeczy takich jak NoScript .
źródło
<form>
wysyłania do celów).XMLHttpRequest
.Używam ich na stronach Ajax, kiedy potrzebuję załadować pliki bez przeładowywania strony.
źródło
Nadal widzę ramki iframe używane w dużych korporacjach, w których zapewniają one pojedynczy znak, który wstrzykuje informacje w nagłówku o uwierzytelnionym użytkowniku, które są następnie przekazywane za pośrednictwem elementu iframe do rzeczywistych aplikacji. Ponieważ „portal” otaczający element iframe obsługuje wszystkie określone szczegóły uwierzytelniania, te aplikacje za nim stojące nie muszą mieć implementacji dla każdego z nich, co ułatwia pracę zespołowi programistów i zapewnia jedno miejsce do monitorowania i dostosowywania szczegółów uwierzytelniania użytkowników.
źródło
Istnieje wiele technicznych powodów, aby z nich korzystać (szczególnie kwestia bezpieczeństwa, o której wspomniał Dan Beam).
Nie powinieneś używać ramek iframe „jak ramki”, nawigując do nowych stron, aktualizując tylko ramkę iframe. Jak mówisz, zapobiega to zakładaniu / łączeniu nawigacji z zakładkami, reagowaniu na zwykłe przyciski nawigacyjne i zapewnianiu przydatnych funkcji linków, takich jak otwieranie w nowej karcie.
Ale to nie jest charakterystyczne dla ramek iframe. Możesz zobaczyć coraz więcej stron, na których nawigacja odbywa się, pobierając nową zawartość
XMLHttpRequest
i zapisując ją w głównych elementach div zawartościinnerHTML
. Często odbywa się to za pomocą jQueryload()
i sprytnych animacji slajdów. To psuje nawigację tak samo źle, jak ramka iframe-used-as-frame, czy nawet oldschoolowe zestawy ramek. Szkoda, że wielu autorów stron internetowych stosuje tę taktykę, wierząc, że jest to supernowoczesna metodologia projektowania stron internetowych, podczas gdy tak naprawdę jest to tylko nowa skóra na pogardzanych wczoraj zestawach ramek.Możesz to obejść w obu przypadkach, ale oznacza to, że musisz przechowywać stan widoku w
#
części z identyfikatorem fragmentu i obsługiwać właściwą nawigację hash, co nie jest trywialne. Nawet wtedy nadal masz problemy z agentami nie będącymi JS, takimi jak wyszukiwarki; w końcu musisz mieć równoległą?
i#
opartą na nawigacji nawigację do obsługi obu. To ból i większość nie przejmuje się tym.źródło
Zestawy ramek są nieaktualne od wersji HTML 5 i czasami trzeba mieć ramkę z inną witryną w witrynie. AJAX może zrobić tylko tyle. Spróbuj przesłać plik do witryny w innej domenie przez https bez elementu iframe. AJAX ci tam nie pomoże.
źródło
Oprócz innych powodów mam jedno szczególne użycie
iframe
w mojej aplikacji. Niestety docelową przeglądarką w moim przypadku jestInternet Explorer 6
. Muszę mieć stopkę i nagłówek, które są poprawione na moich stronach internetowych. Główną część tej strony można przewijać.Jednak w IE6 jest błąd polegający na tym, że nie mogę wyświetlić
div
elementu na wierzchuselect
elementów przy użyciuz-index
właściwości CSS. Dlatego muszę utworzyć plik,iframe
który posłuży jako hack, aby uniknąć tego problemu.Oczywiście jest to naprawdę specyficzne zastosowanie
iframe
i dotyczy tylkoIE6
...źródło
Edytory Javascript WYSIWYG używają ramek iframe, ponieważ jest to najłatwiejszy i najlepszy sposób na zrobienie tego. Na przykład TinyMCE używa go:
http://tinymce.moxiecode.com/
źródło
Budowałem sieć społecznościową i widzę, że elementy iframe są przydatne w przypadku widżetów, które można umieszczać na stronach internetowych innych osób, aby wyświetlać się jak miniprofil lub integrować się z zawartością na zdalnym serwerze. Wydaje się, że to najprostszy sposób na zbudowanie tego. Wiem, że niektóre widżety używają JavaScript. Również w przypadku metody iframe sesja jest taka sama, jak normalne odwiedzanie witryny, więc świetnie nadaje się do podobnych przycisków.
źródło
Wiele formatowanych edytorów tekstu (np. TinyMCE, HTMLArea) jest zaimplementowanych jako iframe.
źródło
Ramki iFrame są w porządku w niektórych przypadkach, jak żądania X-domain lub wysyłanie danych do źródła za pomocą parametrów. Ale kiedy chcę uzyskać dostęp do danych w różnych domenach, wolę używać plików CSS - mogą akceptować parametry, ustawiać pliki cookie, dodawać zawartość do strony (: przed i: po) i przekazywać wizualną informację zwrotną.
źródło