Generator iframe: responsywny kod osadzania z podglądem | We.Inc
Stwórz kod iframe dla dowolnego URL: responsywne proporcje lub stały rozmiar, lazy loading, title, tokeny sandbox, allow i referrer policy, z podglądem na żywo.
Wklej adres, który chcesz osadzić, nadaj ramce tytuł, wybierz responsywny kształt lub stały rozmiar, a generator napisze znacznik iframe z lazy loading, tokenami sandbox, uprawnieniami i referrer policy. Podgląd poniżej ładuje Twój adres, więc przed wklejeniem kodu możesz sprawdzić, czy strona w ogóle pozwala na osadzanie w ramce.
Co zapisuje każda opcja
Opcja
Atrybut lub styl
Domyślnie w tym narzędziu
Tytuł
title="..."
Wymagany, używany przez czytniki ekranu
Responsywny kształt
style="width:100%;aspect-ratio:16 / 9"
Stały rozmiar
width i height
Domyślnie w przeglądarce 300 na 150
Lazy loading
loading="lazy"
Włączone
Sandbox
sandbox="..."
Wyłączony; zaznacz tokeny, aby ograniczyć
Uprawnienia
allow="fullscreen; ..."
tylko fullscreen
Referrer
referrerpolicy="..."
Większości fragmentów iframe w sieci brakuje przynajmniej jednej rzeczy, której potrzebuje nowoczesne osadzenie: tytułu dla technologii wspomagających, lazy loading, aby nie spowalniać pierwszego ekranu, responsywnego rozmiaru i najmniejszego zestawu uprawnień. To narzędzie zapisuje je wszystkie dla dowolnego adresu. Dla wideo, map i stron rezerwacji od znanych dostawców nasz generator kodu osadzania dodatkowo zamienia ich linki do udostępniania na linki do osadzania.
Wklej pełny adres https strony do osadzenia i napisz krótki tytuł opisujący, co to jest.
Wybierz Responsywny z proporcjami albo Stały z szerokością i wysokością w pikselach.
Zostaw włączony lazy loading, chyba że osadzenie jest na samej górze strony.
Zaznacz tokeny sandbox, jeśli treść nie jest w pełni zaufana, i zaznacz tylko te uprawnienia, których osadzenie potrzebuje.
Naciśnij Załaduj podgląd, aby zobaczyć osadzenie dokładnie tak, jak opisuje je kod, a potem skopiuj kod.
Jeśli podgląd pokazuje szare pole z odmową połączenia, strona zabrania osadzania w ramce. Żaden atrybut tego nie zmieni; zajrzyj do naszego przewodnika o tym błędzie.
Dla wideo i map używaj adresu osadzania od samego dostawcy. Ich zwykłe adresy stron często są blokowane przed osadzaniem w ramce.
Trzymaj allow tak małe, jak to możliwe. Każda wymieniona funkcja, na przykład kamera czy geolokalizacja, jest udostępniana osadzonej stronie.
Umieszczaj ciężkie osadzenia poniżej pierwszego ekranu, aby lazy loading mógł zadziałać.
Nie zaznaczaj jednocześnie allow-scripts i allow-same-origin dla treści z Twojej własnej strony; razem znoszą sandbox.
Najczęściej zadawane pytania
Jak zrobić responsywny iframe?
Nadaj mu width: 100% i aspect-ratio, na przykład 16 / 9, a wysokość zostaw automatyczną. Przeglądarka utrzyma wtedy kształt przy każdej szerokości. Starszy trik z wrapperem i padding-top nie jest już potrzebny, skoro aspect-ratio jest powszechnie obsługiwane.
Co robi loading="lazy" w iframe?
Odkłada ładowanie, aż ramka zbliży się do widocznej części strony. Domyślna jest wartość eager, która ładuje od razu. Lazy loading oszczędza dane i przyspiesza pierwszy widok dla ramek znajdujących się niżej.
Dlaczego każdy iframe powinien mieć tytuł?
Użytkownicy czytników ekranu przechodzą między ramkami według ich tytułów. Jasny tytuł, taki jak "Kalendarz rezerwacji studia w Leeds", mówi im, co jest w środku, zanim do niego wejdą.
Co wpisać w atrybucie allow?
Tylko funkcje, których potrzebuje osadzenie, oddzielone średnikami, na przykład allow="fullscreen; picture-in-picture". Wymienienie funkcji bez pochodzenia pozwala na nią dla pochodzenia z src. allow może tylko zawęzić to, na co pozwala własny nagłówek Permissions-Policy strony, nigdy go nie rozszerza.
Czy podgląd wysyła gdzieś moje dane?
Żadne dane nie trafiają do nas. Kod jest tworzony na tej stronie. Podgląd to zwykły iframe w Twojej przeglądarce, więc osadzona strona dostaje od Ciebie normalną wizytę, tak samo jak wtedy, gdy ładują ją Twoi odwiedzający.
Lista kontrolna dla każdego osadzenia
Tytuł, rozmiar, ładowanie, uprawnienia, sandbox, referrer: sześć decyzji, a generator każdą z nich czyni jawną. Wartości domyślne są tu bezpieczne: lazy, responsywny rozmiar, referrer policy wysyłająca między witrynami tylko pochodzenie i żadnych dodatkowych uprawnień poza fullscreen.
Po wklejeniu kodu przetestuj go przy szerokości telefonu. Ramka ze stałą szerokością w pikselach to najczęstsza przyczyna przewijania w bok na urządzeniach mobilnych.
Gdy podgląd jest pusty albo odmawia
Szare pole błędu oznacza, że osadzana strona wysłała nagłówek blokujący ramki. Pusta biała ramka często oznacza, że strona potrzebuje skryptów lub formularzy, które blokuje zaznaczony przez Ciebie token sandbox: odznacz sandbox i spróbuj ponownie, aby odróżnić te dwa przypadki.
Niektóre strony wykrywają też, że są w ramce, i pokazują inną stronę. To ich decyzja i nie da się tego zmienić z zewnątrz.
Prywatność i wydajność
Każdy iframe to pełna strona z innej witryny, z własnymi skryptami i być może własnymi cookies. Wspomnij o osadzonych treściach zewnętrznych w polityce prywatności i wybieraj tryby osadzania przyjazne prywatności, jeśli dostawca je oferuje.
Jeśli osadzenie jest duże i opcjonalne, rozważ placeholder ładowany kliknięciem: pokaż obraz i przycisk, a iframe wstaw dopiero, gdy ktoś o to poprosi.
Gotowe wzorce
Responsywna ramka z aspect-ratio
Zmień rozmiar okna, a ramka zachowa kształt. Wewnętrzna strona pochodzi tu z srcdoc, więc przykład działa offline.
Placeholder ładowany kliknięciem
Nic z innej witryny się nie ładuje, dopóki przycisk nie zostanie naciśnięty. Znacznik template przechowuje prawdziwy iframe.
Stwórz swój iframe
Adres do osadzenia (https)
Tytuł (opisz zawartość)
Rozmiar
Responsywny
Stały
Proporcje
Szerokość (px)
Wysokość (px)
Lazy load (loading="lazy")
Umieść treść w sandbox
Tokeny sandbox
Uprawnienia (allow)
Referrer policy
Twój kod
Kopiuj kod
Załaduj podgląd
Podgląd ładuje adres w Twojej przeglądarce. Szare pole błędu oznacza, że ta strona odmawia osadzania w ramce.
Wpisz pełny adres zaczynający się od https:// lub http://.