Ostatnio edytowany:

iframe

Autor: Virtual Patriot

Przeznaczenie elementu iframe

Element iframe reprezentuje zagnieżdżony w oknie przeglądarki internetowej kontekst przeglądarki internetowej, do którego to kontekstu (okna, ramki) może zostać wczytany kolejny zasób internetowy.

Dodatkowe techniczne informacje o elemencie iframe

kategoria ogólna
kontekst zewnętrzny
element HTML, który tworzy wewnętrzny kontekst wbudowany

Przykładowy Kod HTML

<aside>
  <h6>Statystyka</h6>
  <iframe src="dynamiczna-statystyka-01.html"></iframe>
</aside>

Kontekstem zewnętrznym przykładowego elementu "iframe" jest element "aside". Wspomniany element "aside" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst wbudowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "aside", jest prawidłowym kontekstem zewnętrznym dla elementu "iframe".

kontekst wewnętrzny
ewentualnie zawartość tekstowa

Przykładowy Kod HTML

<aside>
  <h6>Statystyka</h6>
  <iframe src="dynamiczna-statystyka-01.html"></iframe>
</aside>

Przykładowy element "iframe" nie posiada kontekstu wewnętrznego, jednak wspomniany brak kontekstu wewnętrznego jest prawidłowym kontekstem wewnętrznym dla elementu "iframe".

Przykładowy Kod HTML

<aside>
  <h6>Statystyka</h6>
  <iframe src="dynamiczna-statystyka-01.html">
    dane na temat sprzedaży
  </iframe>
</aside>

Kontekstem wewnętrznym przykładowego elementu "iframe" jest wyłącznie zawartość tekstowa, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli ciąg znaków "dane na temat sprzedaży", jest prawidłowym kontekstem wewnętrznym dla elementu "iframe".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

składnia HTML

<iframe> ... </iframe>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

inline-block

Dodatkowe domyślne reguły CSS elementu iframe

iframe {
  display:inline-block;
  width:300px;
  height:150px;
  border-width:2px;
  border-style:inset;
}

Interpretacja elementu iframe

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Interpretuje atrybut sandbox, lecz od wersji "10".

Nie interpretuje atrybutu srcdoc.

Edge

tak

Nie interpretuje atrybutu srcdoc.

Opis atrybutów elementu iframe

height

Przeznaczenie atrybutu height

Atrybut height wykorzystany wraz z elementem iframe określa wartość wysokości, jaką powinien posiadać dany element iframe.

Wartość domyślna

BRAK lub 150 w niektórych przeglądarkach internetowych (w każdej sytuacji)

Wartości atrybutu height

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://webkod.pl/files/html/strona-01.html" height="300"></iframe>

  </body>
</html>

Rezultat

Wartość wysokości przykładowego elementu "iframe" wynosi "300" pikseli, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "height" wraz z wartością "300".

name

Przeznaczenie atrybutu name

Atrybut name wykorzystany wraz z elementem iframe określa nazwę, jaka powinna zostać przypisana do danego elementu iframe.

Wartość domyślna

wartość pusta (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu name

nazwa

Należy podać ciąg znaków, który chcemy aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas nazwy.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe name="ramka-1"></iframe>

    <p>
      <a href="http://webkod.pl/files/html/strona-01.html" target="ramka-1">zobacz przykładową tabelę HTML w elemencie iframe</a>
    </p>

    <p>
      <a href="http://webkod.pl/files/html/zwierze-01.png" target="ramka-1">zobacz przykładowy obrazek w elemencie iframe</a>
    </p>

  </body>
</html>

Rezultat

Nazwą zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez przykładowy element "iframe" jest nazwa "ramka-1", ponieważ do wspomnianego elementu "iframe" został dodany atrybut "name" wraz z wartością "ramka-1".

sandbox

Przeznaczenie atrybutu sandbox

Atrybut sandbox wykorzystany wraz z elementem iframe określa dodatkowe zasady bezpieczeństwa dla zasobu internetowego reprezentowanego przez dany element iframe.

Możemy podać kilka wartości oddzielonych od siebie przynajmniej jednym znakiem spacji.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

wartość pusta (gdy podaliśmy wyłącznie wartość nieprawidłową)

Wartości atrybutu sandbox

sandbox

Gdy element iframe posiada atrybut snadbox wyłącznie w formie atrybutu logicznego, wtedy wspomniany element iframe posiada włączone wszystkie możliwe zasady bezpieczeństwa dla swojego zasobu internetowego.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://webkod.pl/files/html/iframe-sandbox-01.html" width="450" sandbox></iframe>
    <!-- KOD HTML PLIKU - iframe-sandbox-01.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <title>Atrybut sandbox - forma logiczna</title>
        </head>
        <body>

          <form action="http://webkod.pl/php/submit-result.php">
            <label>
              Podaj imię:
              <input type="text" name="imie">
            </label>

            <button type="submit">zatwierdź</button>
          </form>

          <hr>

          <a href="http://webkod.pl/files/html/zwierze-01.png" target="_blank">zobacz zdjęcie lwa w nowym oknie przeglądarki internetowej</a>

          <hr>

          Lista COOKIES danego dokumentu HTML: <b id="lista-1">brak</b>
          <script>window.document.getElementById('lista-1').textContent = (window.document.cookie + 'true' ? 'dostępna' : '');</script>

          <hr>

          <p id="akapit-1">Domyślna treść elementu "p".</p>
          <script>window.document.getElementById('akapit-1').innerHTML += '<b> Dodatkowa treść elementu "p". </b>';</script>

          <hr>

          <a href="http://webkod.pl/files/html/zwierze-01.png" target="_top">zobacz zdjęcie lwa w aktualnym oknie przeglądarki internetowej</a>

        </body>
      </html>
    -->

  </body>
</html>

Rezultat

Przykładowy element "iframe" reprezentujący zasób internetowy posiada włączone wszystkie możliwe dodatkowe zasady bezpieczeństwa dla wspomnianego zasobu internetowego, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "sandbox".

Element iframe - zasady bezpieczeństwa zasobu internetowego

  • Wyłącznie obsługi skryptów domyślnie reprezentowanych przez język JavaScript przy równoczesnym uaktywnieniu zawartości reprezentowanej przez ewentualne elementy noscript występujące w zawartości danego dokumentu HTML.
  • Brak możliwości utworzenia nowego kontekstu przeglądarki internetowej, np. za pomocą atrybutu target o wartości _blank.
  • Brak możliwości zatwierdzenia formularza HTML.
  • Brak możliwości wczytania zasobu internetowego, który wykorzystuje dodatkowe wtyczki przeglądarki internetowej (np. wtyczkę FLASH).
  • Brak możliwości nawigacji do kontekstu przodka danego elementu iframe za pomocą atrybutu target o wartości _parent lub o wartości _top.
  • Automatyczne udogodnienia są wyłączone. Mowa tu o takich udogodnieniach jak automatyczne skupienie się na wybranym elemencie HTML formularza HTML lub automatyczne odtwarzanie audio lub wideo.
  • Traktowanie przez przeglądarkę internetową zasobu internetowego reprezentowanego przez dany element iframe jak zasobu internetowego pochodzącego z unikalnego źródła, co w efekcie prowadzi do wyłączenia możliwości pobrania informacji o COOKIES (tzw. ciasteczka), LOCAL-STORAGE (tzw. przechowywanie lokalne danych), INDEXED-DB (tzw. lokalna baza danych) oraz o wszystkich innych tego typu podobnych mechanizmach.

    Wspomnianą blokadę zdejmuje kombinacja wartości allow-scripts allow-same-origin danego atrybutu "sandbox".

  • Blokada pointer lock, czyli możliwości przypisania pozycji kursora myszki tylko do jednego wybranego elementu HTML.
allow-forms

Wartość allow-forms oznacza, że zostanie włączona tylko i wyłącznie możliwość zatwierdzania formularza HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://webkod.pl/files/html/iframe-sandbox-01.html" width="450" sandbox="allow-forms"></iframe>
    <!-- KOD HTML PLIKU - iframe-sandbox-01.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <title>Atrybut sandbox - wartość allow-forms</title>
        </head>
        <body>

          <form action="http://webkod.pl/php/submit-result.php">
            <label>
              Podaj imię:
              <input type="text" name="imie">
            </label>

            <button type="submit">zatwierdź</button>
          </form>

          <hr>

          <a href="http://webkod.pl/files/html/zwierze-01.png" target="_blank">zobacz zdjęcie lwa w nowym oknie przeglądarki internetowej</a>

          <hr>

          Lista COOKIES danego dokumentu HTML: <b id="lista-1">brak</b>
          <script>window.document.getElementById('lista-1').textContent = (window.document.cookie + 'true' ? 'dostępna' : '');</script>

          <hr>

          <p id="akapit-1">Domyślna treść elementu "p".</p>
          <script>window.document.getElementById('akapit-1').innerHTML += '<b> Dodatkowa treść elementu "p". </b>';</script>

          <hr>

          <a href="http://webkod.pl/files/html/zwierze-01.png" target="_top">zobacz zdjęcie lwa w aktualnym oknie przeglądarki internetowej</a>

        </body>
      </html>
    -->

  </body>
</html>

Rezultat

Wszystkie możliwe dodatkowe zasady bezpieczeństwa dla zasobu internetowego reprezentowanego przez przykładowy element "iframe" zostały włączone poza zablokowaniem możliwości zatwierdzenia formularza HTML, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "sandbox" wraz z wartością "allow-forms".

allow-pointer-lock

Wartość allow-pointer-lock oznacza tylko i wyłącznie wyłączenie blokady pointer lock.

allow-popups

Wartość allow-popups oznacza, że zostanie włączona tylko i wyłącznie możliwość utworzenia nowego kontekstu przeglądarki internetowej, np. za pomocą atrybutu target o wartości _blank.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://webkod.pl/files/html/iframe-sandbox-01.html" width="450" sandbox="allow-popups"></iframe>
    <!-- KOD HTML PLIKU - iframe-sandbox-01.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <title>Atrybut sandbox - wartość allow-popups</title>
        </head>
        <body>

          <form action="http://webkod.pl/php/submit-result.php">
            <label>
              Podaj imię:
              <input type="text" name="imie">
            </label>

            <button type="submit">zatwierdź</button>
          </form>

          <hr>

          <a href="http://webkod.pl/files/html/zwierze-01.png" target="_blank">zobacz zdjęcie lwa w nowym oknie przeglądarki internetowej</a>

          <hr>

          Lista COOKIES danego dokumentu HTML: <b id="lista-1">brak</b>
          <script>window.document.getElementById('lista-1').textContent = (window.document.cookie + 'true' ? 'dostępna' : '');</script>

          <hr>

          <p id="akapit-1">Domyślna treść elementu "p".</p>
          <script>window.document.getElementById('akapit-1').innerHTML += '<b> Dodatkowa treść elementu "p". </b>';</script>

          <hr>

          <a href="http://webkod.pl/files/html/zwierze-01.png" target="_top">zobacz zdjęcie lwa w aktualnym oknie przeglądarki internetowej</a>

        </body>
      </html>
    -->

  </body>
</html>

Rezultat

Wszystkie możliwe dodatkowe zasady bezpieczeństwa dla zasobu internetowego reprezentowanego przez przykładowy element "iframe" zostały włączone poza zablokowaniem możliwości utworzenia nowego kontekstu przeglądarki internetowej, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "sandbox" wraz z wartością "allow-popups".

allow-same-origin

Wartość allow-same-origin oznacza tylko i wyłącznie, że zasób internetowy reprezentowany przez dany element iframe nie będzie traktowany przez przeglądarkę internetową jak zasób internetowy pochodzący z unikalnego źródła.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://webkod.pl/files/html/iframe-sandbox-01.html" width="450" sandbox="allow-same-origin allow-scripts"></iframe>
    <!-- KOD HTML PLIKU - iframe-sandbox-01.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <title>Atrybut sandbox - wartość allow-same-origin</title>
        </head>
        <body>

          <form action="http://webkod.pl/php/submit-result.php">
            <label>
              Podaj imię:
              <input type="text" name="imie">
            </label>

            <button type="submit">zatwierdź</button>
          </form>

          <hr>

          <a href="http://webkod.pl/files/html/zwierze-01.png" target="_blank">zobacz zdjęcie lwa w nowym oknie przeglądarki internetowej</a>

          <hr>

          Lista COOKIES danego dokumentu HTML: <b id="lista-1">brak</b>
          <script>window.document.getElementById('lista-1').textContent = (window.document.cookie + 'true' ? 'dostępna' : '');</script>

          <hr>

          <p id="akapit-1">Domyślna treść elementu "p".</p>
          <script>window.document.getElementById('akapit-1').innerHTML += '<b> Dodatkowa treść elementu "p". </b>';</script>

          <hr>

          <a href="http://webkod.pl/files/html/zwierze-01.png" target="_top">zobacz zdjęcie lwa w aktualnym oknie przeglądarki internetowej</a>

        </body>
      </html>
    -->

  </body>
</html>

Rezultat

Wszystkie możliwe dodatkowe zasady bezpieczeństwa dla zasobu internetowego reprezentowanego przez przykładowy element "iframe" zostały włączone poza traktowaniem przez przeglądarkę internetową wspomnianego zasobu internetowego jako zasobu internetowego pochodzącego z unikalnego źródła oraz poza zablokowaniem automatycznych udogodnień oraz obsługi skryptów, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "sandbox" wraz z wartością "allow-same-origin allow-scripts".

allow-scripts

Wartość allow-scripts oznacza, że zostaną włączone tylko i wyłącznie automatyczne udogodnienia oraz obsługa skryptów (np. języka JavaScript).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://webkod.pl/files/html/iframe-sandbox-01.html" width="450" sandbox="allow-scripts"></iframe>
    <!-- KOD HTML PLIKU - iframe-sandbox-01.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <title>Atrybut sandbox - wartość allow-scripts</title>
        </head>
        <body>

          <form action="http://webkod.pl/php/submit-result.php">
            <label>
              Podaj imię:
              <input type="text" name="imie">
            </label>

            <button type="submit">zatwierdź</button>
          </form>

          <hr>

          <a href="http://webkod.pl/files/html/zwierze-01.png" target="_blank">zobacz zdjęcie lwa w nowym oknie przeglądarki internetowej</a>

          <hr>

          Lista COOKIES danego dokumentu HTML: <b id="lista-1">brak</b>
          <script>window.document.getElementById('lista-1').textContent = (window.document.cookie + 'true' ? 'dostępna' : '');</script>

          <hr>

          <p id="akapit-1">Domyślna treść elementu "p".</p>
          <script>window.document.getElementById('akapit-1').innerHTML += '<b> Dodatkowa treść elementu "p". </b>';</script>

          <hr>

          <a href="http://webkod.pl/files/html/zwierze-01.png" target="_top">zobacz zdjęcie lwa w aktualnym oknie przeglądarki internetowej</a>

        </body>
      </html>
    -->

  </body>
</html>

Rezultat

Wszystkie możliwe dodatkowe zasady bezpieczeństwa dla zasobu internetowego reprezentowanego przez przykładowy element "iframe" zostały włączone poza zablokowaniem automatycznych udogodnień oraz obsługi skryptów, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "sandbox" wraz z wartością "allow-scripts".

allow-top-navigation

Wartość allow-top-navigation oznacza, że zostanie włączona tylko i wyłącznie możliwość nawigacji do kontekstu przodka danego elementu iframe za pomocą atrybutu target o wartości _parent lub o wartości _top.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://webkod.pl/files/html/iframe-sandbox-01.html" width="450" sandbox="allow-top-navigation"></iframe>
    <!-- KOD HTML PLIKU - iframe-sandbox-01.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <title>Atrybut sandbox - wartość allow-top-navigation</title>
        </head>
        <body>

          <form action="http://webkod.pl/php/submit-result.php">
            <label>
            Podaj imię:
              <input type="text" name="imie">
            </label>

            <button type="submit">zatwierdź</button>
          </form>

          <hr>

          <a href="http://webkod.pl/files/html/zwierze-01.png" target="_blank">zobacz zdjęcie lwa w nowym oknie przeglądarki internetowej</a>

          <hr>

          Lista COOKIES danego dokumentu HTML: <b id="lista-1">brak</b>
          <script>window.document.getElementById('lista-1').textContent = (window.document.cookie + 'true' ? 'dostępna' : '');</script>

          <hr>

          <p id="akapit-1">Domyślna treść elementu "p".</p>
          <script>window.document.getElementById('akapit-1').innerHTML += '<b> Dodatkowa treść elementu "p". </b>';</script>

          <hr>

          <a href="http://webkod.pl/files/html/zwierze-01.png" target="_top">zobacz zdjęcie lwa w aktualnym oknie przeglądarki internetowej</a>

        </body>
      </html>
    -->

  </body>
</html>

Rezultat

Wszystkie możliwe dodatkowe zasady bezpieczeństwa dla zasobu internetowego reprezentowanego przez przykładowy element "iframe" zostały włączone poza zablokowaniem możliwości nawigacji do kontekstu przodka wspomnianego elementu "iframe", ponieważ do wspomnianego elementu "iframe" został dodany atrybut "sandbox" wraz z wartością "allow-top-navigation".

src

Przeznaczenie atrybutu src

Atrybut src wykorzystany wraz z elementem iframe określa adres zasobu internetowego, który powinien być reprezentowany przez dany element iframe.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu src

URI

Należy podać niepusty ciąg znaków w formie adresu URI.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://webkod.pl/files/html/strona-01.html"></iframe>

  </body>
</html>

Rezultat

Zasobem internetowym, który powinien być reprezentowany przez przykładowy element "iframe" jest zasób internetowy "strona-01.html" znajdujący się pod adresem "http://webkod.pl/files/html/strona-01.html", dlatego do wspomnianego elementu "iframe" został dodany atrybut "src" wraz z wartością "http://webkod.pl/files/html/strona-01.html".

srcdoc

Przeznaczenie atrybutu srcdoc

Atrybut srcdoc wykorzystany wraz z elementem iframe określa kod HTML, który powinien być reprezentowany przez dany element iframe.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu srcdoc

kod HTML

Należy podać ciąg znaków w formie kodu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe srcdoc="<html><b>Przykładowy kod HTML reprezentowany przez element iframe.</b></html>"></iframe>

  </body>
</html>

Rezultat

Kodem HTML reprezentowanym przez przykładowy element "iframe" jest kod "<html><b>Przykładowy kod HTML reprezentowany przez element iframe.</b></html>", ponieważ do wspomnianego elementu "iframe" został dodany atrybut "srcdoc" wraz z wartością "<html><b>Przykładowy kod HTML reprezentowany przez element iframe.</b></html>".

width

Przeznaczenie atrybutu width

Atrybut width wykorzystany wraz z elementem iframe określa wartość szerokości, jaką powinien posiadać dany element iframe.

Wartość domyślna

BRAK lub 300 w niektórych przeglądarkach internetowych (w każdej sytuacji)

Wartości atrybutu width

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://webkod.pl/files/html/strona-01.html" width="400"></iframe>

  </body>
</html>

Rezultat

Wartość szerokości przykładowego elementu "iframe" wynosi "400" pikseli, ponieważ do wspomnianego elementu "iframe" został dodany atrybut "width" wraz z wartością "400".