Zagnieżdżony kontekst przeglądarki internetowej

Za pomocą elementu iframe w oknie przeglądarki internetowej możemy utworzyć zagnieżdżony kontekst przeglądarki internetowej. W praktyce oznacza to, że w oknie przeglądarki internetowej może powstać dodatkowe miejsce, do którego to miejsca możemy wczytać dodatkowy zasób internetowy, który to zasób internetowy zazwyczaj możemy wyświetlić w oknie przeglądarki internetowej za pomocą innych elementów HTML.

Przykład:

<iframe></iframe>

Rezultat:

Nasz przykładowy kod HTML reprezentuje zagnieżdżony kontekst przeglądarki internetowej.

Aby do naszego przykładowego elementu iframe został wczytany interesujący nas zasób internetowy, do wspomnianego elementu iframe należy dodać atrybut src wraz z wartością określającą adres interesującego nas zasobu internetowego.

Przykład:

<iframe src="./files/html/zwierze-01.png"></iframe>

Rezultat:

Nasz przykładowy kod HTML reprezentuje zagnieżdżony kontekst przeglądarki internetowej, do którego to zagnieżdżonego kontekstu przeglądarki internetowej został wczytany zasób internetowy znajdujący się pod adresem ./files/html/zwierze-01.png.

Kolejny przykład:

<iframe src="./files/html/strona-01.html"></iframe>

Rezultat:

Nasz przykładowy kod HTML reprezentuje zagnieżdżony kontekst przeglądarki internetowej, do którego to zagnieżdżonego kontekstu przeglądarki internetowej został wczytany zasób internetowy znajdujący się pod adresem ./files/html/strona-01.html.

Za pomocą wartości atrybutu width możemy ustalić wartość szerokości zagnieżdżonego kontekstu przeglądarki internetowej.

Za pomocą wartości atrybutu height możemy ustalić wartość wysokości zagnieżdżonego kontekstu przeglądarki internetowej.

Obie wspomniane wartości liczone są przez przeglądarkę internetową w pikselach.

Przykład:

<iframe width="500" height="250" src="./files/html/strona-01.html"></iframe>

Rezultat:

Element iframe przeważnie wykorzystywany jest do tego, aby móc wyświetlić na naszej stronie internetowej zasób internetowy znajdujący się na innej stronie internetowej, na przykład zasób internetowy pochodzący z serwisu youtube.com.

Przykład:

<article>
  <h1>Moja ulubiona piosenkarka</h1>

  <p>
    Moją ulubioną piosenkarką, odkąd pamiętam, jest <b>Ayumi Hamasaki</b>.
  </p>

  <iframe src="https://www.youtube-nocookie.com/embed/-R_qN5JTgzw" width="560" height="315"></iframe>
</article>

Rezultat: