HTML - Iframe


Šta je iframe?

Iframe ili inline okvir koriste se za prikaz vanjskih objekata, uključujući i ostale web stranice unutar web sajta. Iframe djeluje poput mini web pretraživača. Takođe, sadržaj unutar iframe-a potpuno je nezavisan od okolnih elemenata. Osnovna sintaksa za dodavanje iframea na web stranicu može se napisat kao:

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

URL naveden u atributu src upućuje na lokaciju vanjskog objekta ili web stranice. Sljedeći primjer prikazuje fajl "hello.html" unutar iframea u trenutnom dokumentu.

<iframe src="hello.html"></iframe>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML iFrame</title>
</head>
<body>
  <iframe src="/examples/html/hello.html"></iframe>
</body>
</html>


Podešavanje širine i visine iFrame-a

Atributi height i width koriste se za određivanje visine i širine iframea.

<iframe src="hello.html" width="400" height="200"></iframe>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Specifikovanje iFrame dimenzija u HTML</title>
</head>
<body>
    <h2>Navođenje širinu i visinu pomoću atributa</h2>
    <iframe src="/examples/html/hello.html" width="400" height="200"></iframe>
    <hr>
    <h2>Određivanje širinu i visinu pomoću CSS-a</h2>
    <iframe src="/examples/html/hello.html" style="width: 400px; height: 200px;"></iframe>
</body>
</html>

Možete koristiti i CSS za podešavanje širine i visine iframea, kao što je prikazano u pimjeru:

<iframe src="hello.html" style="width: 400px; height: 200px;"></iframe>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Naveđenje iFrame dimenzija u HTML-u</title>
</head>
<body>
    <h2>Određivanje širine i visine pomoću atributa</h2>
    <iframe src="/examples/html/hello.html" width="400" height="200"></iframe>
    <hr>
    <h2>Određivanje širinu i visinu pomoću CSS-a</h2>
    <iframe src="/examples/html/hello.html" style="width: 400px; height: 200px;"></iframe>
</body>
</html>


Uklanjanje zadane granice okvira

Iframe ima zadanu granicu oko okvira. Međutim, ako želite izmijeniti ili ukloniti okvire iframe-a, najbolji način je korištenje CSS svojstva border. Sljedeći primjer će jednostavno prikazati iframe bez ikakvih granica.

<iframe src="hello.html" style="border: none;"></iframe>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Uklanjanje granica iz iFrame-a pomoću CSS-a</title>
</head>
<body>
    <iframe src="/examples/html/hello.html" style="border: none;"></iframe>
</body>
</html>               

Slično tome, možete koristiti svojstvo boreder da biste dodali granice po vašem izboru u iframe. Sljedeći primjer će prikazati iframe s 2px plavim borderom.

<iframe src="hello.html" style="border: 2px solid blue;"></iframe>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Promijena iFrame granice pomoću CSS-a</title>
</head>
<body>
    <iframe src="/examples/html/hello.html" style="border: 2px solid blue;"></iframe>
</body>
</html>


Korištenje iFrame-a kao putanja do linka

Iframe se može koristiti i kao meta hiperveza. Iframe se može imenovati pomoću atributa name. To podrazumijeva da kada se klikne link s atributom target s tim imenom kao vrijednosti, povezani resurs će se otvoriti u tom iframe-u. Pokušajmo na primjeru da razumijemo kako to u stvarnosti funkcioniše:

<iframe src="demo-page.html" name="myFrame"></iframe>
<p><a href="https://www.ittutorijali.net" target="myFrame">Otvori stranicu ittutorijali.net</a></p>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Otvaranje linka u iFrame</title>
  <style>
    iframe {
      width: 100%;
      height: 500px;
    }
  </style>
</head>
<body>
    <iframe src="/examples/html/hello.html" name="myFrame"></iframe>
    <p><a href="https://www.ittutorijali.net" target="myFrame">Otvori stranicu ittutorijali.net</a></p>
</body>
</html>