Wprowadzenie do iframe w HTML

Ramki iframe w HTML to nic innego jak wbudowane ramki, które są używane jako dokument HTML w celu dodania do niego innego dokumentu HTML. Najczęściej stosuje się go na stronach internetowych lub w procesach tworzenia stron internetowych, aby zawierać inne treści z innego źródła, takie jak reklamy na tej stronie.

Większość projektantów stron internetowych korzysta z iframe do prezentacji interaktywnych aplikacji na stronie internetowej lub na stronach internetowych. Jest to możliwe przy użyciu javaScript lub atrybutu target w HTML.

Głównym celem Iframe jest wyświetlenie strony internetowej na innej stronie internetowej. Wewnętrzna ramka powinna być wyświetlana przy użyciu znacznika o nazwie

  • Możliwe jest również nadanie naszej ramce iframe określonej wysokości i szerokości w formacie pikseli w następujący sposób:
  • W powyższej składni wszystko będzie wyglądało tak samo, dodatkowo możemy określić wysokość i szerokość w formacie pikseli, definiując jako

Przykład:

  • Jeszcze jedna metoda definiowania wysokości i szerokości iframe przy użyciu wartości za pomocą CSS jest pokazana w poniższej składni:
  • Wszystkie rzeczy są takie same jak powyżej, po prostu zmieniając wartości.

Przykład:

  • Do iframe dodano jeszcze jedną cechę: możemy usunąć już zdefiniowane ramki do ramki za pomocą właściwości border none. Składnia tego jest następująca:
  • Za pomocą CSS można również robić wiele rzeczy z ramką, np. Zmieniać rozmiar ramki, nakładać kolor na ramkę itp.

Element iframe może być używany jako element docelowy łącza za pomocą składni:

  • W powyższej składni src to nasz normalny adres URL, tutaj atrybut docelowy linku będzie odwoływał się do atrybutu name w naszym tagu iframe.

Przykład:

Atrybut Tag iframes

W ramkach iframe stosowane są różne tagi atrybutów, które są następujące:

  • Src: Ten atrybut służy do wstawiania plików, które muszą być zawarte w ramce. Adres URL określa docelową stronę internetową, która ma zostać załadowana w ramce iframe.
  • Nazwa: Nazwa to atrybut używany do nadania ramce nazwy identyfikacyjnej. Jest to najbardziej przydatne, gdy tworzysz jeden link, aby otworzyć inną stronę internetową.
  • allowfullscreen: Ten atrybut pozwala wyświetlać ramkę w formacie pełnej szerokości. więc musimy ustawić wartość true, aby ta funkcja działała
  • Frameborder: Jest to przydatny atrybut, który pozwala wyświetlać ramkę lub nie wyświetlać ramki. Wartość 1 pokazuje ramkę, a 0 nie pokazuje ramki do ramki.
  • Margines szerokości: Pozwala zdefiniować przestrzeń między lewą i prawą stroną ramki
  • Marginesheight: Pozwala zdefiniować przestrzeń między górą i dołem ramki.
  • Przewijanie: te atrybuty służą do kontrolowania, czy pasek przewijania ma być wyświetlany ramce, czy nie. uwzględnione wartości to „tak” lub „nie” lub „auto”.
  • Wysokość: służy do definiowania wysokości ramy. Pogoda w% lub w pikselach
  • Szerokość: służy do definiowania szerokości ramki. Pogoda w% lub w pikselach
  • Longdesc: Za pomocą tego atrybutu możesz połączyć inną stronę z długim opisem zawartości twojej ramki.

Przykłady elementów iframe w HTML

Oto kilka przykładów ramek iframe w HTML, które wyjaśniono poniżej:

Przykład 1

Rozważmy jeden przykład, w którym pokażemy, jak utworzyć ramkę iframe o określonej wysokości i szerokości.

Kod:

Demo iframe HTML


Tutaj pokazujemy przykład ramki iframe, która zawiera określoną wysokość i szerokość w formacie pikseli

Wynik:

Przykład nr 2

Rozważmy inny przykład, w którym pokażemy, jak utworzyć ramkę iframe o określonej wysokości i szerokości. Ale w tym przykładzie określamy wysokość i szerokość za pomocą CSS. Tutaj widzimy, że pasek przewijania jest dostosowywany zgodnie z rozmiarem zawartości.

Kod:

Demo iframe HTML


Tutaj pokazujemy przykład ramki iframe, która zawiera określoną wysokość i szerokość w formacie pikseli

Wynik:

Przykład nr 3

Rozważamy tutaj przykład, w którym dodamy ramkę do ramki iframe, dodając dodatkowe właściwości CSS do pokazania zmiany rozmiaru ramki, zmiany koloru ramki itp. Więc możemy dodać tyle, ile styl do naszego iframe.

Kod:

Demo iframe HTML


Tutaj pokazujemy przykład iframe, który zawiera ramkę z dodatkowymi właściwościami CSS

Wynik:

Przykład 4

Rozważmy inny przykład, w którym pokażemy, w jaki sposób atrybut docelowy otwiera link do strony internetowej za pomocą elementu iframe.

Kod:

Demo-docelowy element iframe dla łącza


EDUCBA

Kiedy cel łącza odpowiada nazwie iframe, link otworzy się w iframe.

Wynik:

Docelowy wynik:

Jak pokazano powyżej Przykład, jesteśmy w stanie kliknąć docelowy link EDUCBA, aby otworzyć następną stronę pokazaną poniżej.

Wniosek

Na podstawie wszystkich powyższych informacji stwierdzono, że iframe jest ramką wbudowaną, która zawiera w sobie inny dokument HTML. Uważany jest za najpotężniejszy element HTML do celów projektowania stron internetowych. Za jego pomocą możesz również dodawać treści z innego źródła. Wykorzystuje różne rodzaje atrybutów HTML, takie jak atrybuty globalne, atrybuty zdarzeń, niektóre powiązane strony itp.

Polecane artykuły

To jest przewodnik po ramkach iframe w HTML. Tutaj omawiamy składnię, atrybut tagu iframe w HTML wraz z różnymi przykładami i implementacją kodu. Możesz także przejrzeć następujące artykuły, aby dowiedzieć się więcej -

  1. Polecenia selenu
  2. Ramki HTML
  3. Link tekstowy HTML
  4. Twórz tabele w HTML

Kategoria:

Narzędzia programistyczne