באמצעות התגית iframe ב-HTML ניתן להציג עמוד אינטרנט או קטע מעמוד אינטרנט במעין חלון פנימי בתוך עמוד האינטרנט שאותו אנחנו בונים
iframe היא תגית שהייתה נמצאת בעבר בשימוש נרחב בדפי אינטרנט ומטרתה להציג עמוד אינטרנט בתוך קטע מוגדר בדף אינטרנט אחר.
כמובן שניתן להגדיר מאפייני גובה ורוחב לאזור שבו נרצה להציג את ה-iframe שלנו,
כאשר את הערכים של הגובה והרוחב ניתן לכתוב או בפיקסלים (100px) או באחוזים (60%)
כמו כן, ישנם דפדפנים אשר אינם תומכים ב-iframe, כאשר במקרה כזה ה-iframe פשוט לא יוצג.
שימו לב לקטע הקוד הבא שבו נוסיף את התגית לאותו דף האינטרנט שעבדנו עליו בפרק הקודם של המדריך הבסיסי ל-HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello, World!</title>
<h1>this is an example of our basic HTML Document with links</h1>
</head>
<body>
<p>this is an example of link, click <a href="https://www.technow.co.il">here</a>
<br/>
<br/>
this is my image:
<br/>
<br/>
<a href="https://www.g4a.co.il/">
<img src="logo.png" alt="text" style="height: 100px;" style="width: 100px;">
</a>
<br/>
this is exeple of iframe:
<br/>
<iframe src="https://www.g4a.co.il/" frameborder="0" scrolling="no" style=" width:800px; height:120px; overflow:hidden;" ></iframe>
</p>
</body>
</html>
כפי שניתן לראות, השתמשנו באלמנט ה-iframe כך שיוצג לנו החלק העליון של האתר בחלון פנימי.
אם תנסו בעצמכם, תיווכחו לדעת שזה יותר מסתם view של אותו דף אינטרנט..
ניתן להשתמש בדף האינטרנט שמוכל בתוך iframe כמו שנוכל להשתמש בכל דף אינטרנט אחר.
כלומר שאם נלחץ על קישור שנמצא בתוך iframe, התצוגה תוחלף אל היעד שאליו ינווט הקישור.
את מסגרת החלון ופסי הגלילה ביטלנו באמצעות המאפיינים scrolling ו-frameborder.
הטמעת סרטונים מ-Youtube
על מנת להטמיע סרטון מ-Youtube בדף האינטרנט שלנו נפעל כך:
- נלחץ על שיתוף סרטון ב-Youtube
- נלחץ על הטמעה
- נעתיק את קוד ה-iframe למקום הרצוי.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello, World!</title>
<h1>this is an example of our basic HTML Document with links & iframe</h1>
</head>
<body>
<p>this is an example of link, click <a href="https://www.technow.co.il">here</a>
<br/>
<br/>
this is my image:
<br/>
<br/>
<a href="https://www.g4a.co.il/">
<img src="logo.png" alt="text" style="height: 100px;" style="width: 100px;">
</a>
<br/>
this is exeple of iframe:
<br/>
<iframe width="560" height="315" src="https://www.youtube.com/embed/LXb3EKWsInQ"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</p>
</body>
</html>
כפי שניתן לראות, החלפנו את תכולת תגית ה-iframe בהטמעת סרטון מ-Youtube.
כעת דף האינטרנט שלנו נראה כך:
אפשרות נוספת הקשורה לתגית iframe שהייתה מאוד נפוצה בעבר, היא לפתוח קישורים שנמצאים בתוך ה-iframe בחלון המרכזי. בעבר, כאמור, הייתה שיטה זו נפוצה שכן בוני אתרים השתמשו ב-iframe על מנת לייצר תפריט קבוע הנמצא בחלק העליון או בצד ימין\שמאל של המסך. האפשרות פועלת באמצעות אלמנט target בתוך תגית הקישור . אם לרוב נתקלתם באלמנט target="_blank", שפותח את הקישור בחלון חדש למשל, אז כאן נשתמש ב-_parent:
<a href="https://www.g4a.co.il" target="_parent">Click Me</a>
בדוגמה הזו, הקישור שנמצא בתוך ה-iframe יפתח בחלון המרכזי שמכיל את ה-iframe. אפשרות נוספת היא לקשר בין שני iframes, כך ש-iframe אחד שולט באחר.
לצורך הדוגמה אנחנו ניצור דף שבו שני iframes:
<iframe src="main.html" name="mainWindow"></iframe> <iframe src="menu.html" name="mainMenu"></iframe>
בתוך ה-iframe של ה-menu אנחנו נייצר את הקישורים בצורה הבאה:
<a href="https://www.g4a.co.il" target="mainWindow">Click Me</a>
כפי שבוודאי שמתם לב, אלמנט ה-target מופנה אל השם של ה-iframe בו אנו רוצים שהקישור יפתח.
כעת, לאחר שהבנו את נושא ה-iframe,
בפרק הבא של המדריך נלמד איך להוסיף לדף האינטרנט שלנו רשימות וטבלאות
