Zawartość do osadzania

7.1 Element <iframe>

Element <iframe> w HTML używany jest do osadzania innego dokumentu HTML w bieżącym dokumencie. Pozwala to na wyświetlanie zawartości innych stron internetowych w głównym dokumencie, tworząc możliwość integracji różnych zasobów, takich jak wideo, mapy, dokumenty i inne strony internetowe.

Element <iframe> tworzy osadzony ramkę, która może wyświetlać inny dokument HTML. Ten dokument może być załadowany z dowolnego URL-a i działać niezależnie od głównego dokumentu.

Składnia:

    
      <iframe src="URL"></iframe>
    
  

Przykład użycia:

    
      <iframe src="https://www.example.com" width="600" height="400" title="Przykład iframe"></iframe>
    
  

Atrybuty

• src: URL adres dokumentu, który będzie załadowany w <iframe>
• width: szerokość ramki (może być podana w pikselach lub procentach)
• height: wysokość ramki (może być podana w pikselach lub procentach)
• title: krótki opis zawartości ramki (ważne dla dostępności)
• name: nazwa ramki, która może być używana do celowania linków i formularzy
• sandbox: ustawia ograniczenia dla zawartości ramki, zwiększając bezpieczeństwo
• allow: określa, jakie funkcje mogą być używane w <iframe> (np. allowfullscreen dla trybu pełnoekranowego)

7.2 Atrybut allowfullscreen

Atrybut allowfullscreen pozwala włączyć tryb pełnoekranowy dla zawartości załadowanej w <iframe>. Bez tego atrybutu zawartość nie może przejść w tryb pełnoekranowy.

Składnia:

    
      <iframe src="https://www.example.com" allowfullscreen></iframe>
    
  

Przykład użycia:

    
      <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        allowfullscreen>
      </iframe>
    
  

Tryb pełnoekranowy pozwala użytkownikowi oglądać wideo lub inne zasoby w pełnym ekranie, co poprawia doświadczenia użytkownika.

7.3 Atrybut allow

Atrybut allow określa, jakie funkcje mogą być używane w <iframe>, takie jak dostęp do geolokacji, kamera, mikrofon i tryb pełnoekranowy.

Składnia:

    
      allow="geolocation; microphone; camera; fullscreen"
    
  

Przykład użycia:

    
      <iframe
        src="https://www.example.com"
        allow="geolocation; microphone; camera; fullscreen">
      </iframe>
    
  

Zalety:

• Kontrola nad funkcjonalnością: pozwala wskazać, jakie funkcje i API mogą być używane przez osadzoną zawartość
• Zarządzanie uprawnieniami: zapewnia elastyczność w zarządzaniu dostępem do różnych funkcji, takich jak geolokacja i kamera

7.4 Atrybut sandbox

Atrybut sandbox używany jest do nakładania ograniczeń na zawartość załadowaną w <iframe>. Zapobiega wykonywaniu niektórych działań, takich jak uruchamianie skryptów czy otwieranie okien popup, zwiększając w ten sposób bezpieczeństwo.

Składnia:

    
      sandbox="allow-scripts allow-same-origin"
    
  

Wartości atrybutu sandbox:

• allow-forms: pozwala na wysyłanie formularzy
• allow-modals: pozwala na używanie okien modalnych
• allow-orientation-lock: pozwala na blokowanie orientacji ekranu
• allow-pointer-lock: pozwala na przechwytywanie wskaźnika
• allow-popups: pozwala na otwieranie okien popup
• allow-popups-to-escape-sandbox: pozwala opuszczać okna popup poza sandbox
• allow-presentation: pozwala na dostęp do API prezentacji
• allow-same-origin: pozwala na wykonywanie skryptów z tego samego źródła
• allow-scripts: pozwala na wykonywanie skryptów
• allow-storage-access-by-user-activation: pozwala na dostęp do pamięci przez aktywację użytkownika
• allow-top-navigation: pozwala na nawigację na najwyższym poziomie
• allow-top-navigation-by-user-activation: pozwala na nawigację na najwyższym poziomie przez aktywację użytkownika

Przykład użycia:

    
      <iframe
        src="https://www.example.com"
        sandbox="allow-scripts allow-same-origin">
      </iframe>
    
  

Zalety:

• Bezpieczeństwo: zapobiega wykonywaniu potencjalnie złośliwych skryptów i ogranicza funkcjonalność osadzonej zawartości
• Kontrola dostępu: pozwala developerom dokładnie określić, jakie funkcje są dozwolone dla osadzonej zawartości

7.5 Atrybut loading

Atrybut loading kontroluje, jak <iframe> jest ładowany, pozwalając na opóźnione ładowanie dopóki element nie stanie się widoczny na ekranie (leniwe ładowanie).

Wartości atrybutu loading:

• lazy: opóźnia ładowanie <iframe> dopóki element nie stanie się widoczny
• eager: ładowanie <iframe> odbywa się natychmiast, niezależnie od jego widoczności

Składnia:

    
      loading="status"
    
  

Przykład użycia:

    
      <iframe
        src="https://www.example.com"
        width="600"
        height="400"
        loading="lazy">
      </iframe>
    
  

Zalety:

• Optymalizacja wydajności: leniwe ładowanie zmniejsza ilość ładowanych danych i przyspiesza czas ładowania strony
• Zmniejszenie użycia zasobów: pozwala na ładowanie tylko tych elementów, które użytkownik faktycznie widzi i używa