המדריך הבסיסי ל-HTML – חלק ו' – התגית iframe

הזמינו אותי לכוס קפה
buy me coffee

באמצעות התגית 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 exemple of our basic HTML Document with links</h1>
</head>
<body>
    <p>this is an exemple 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>
HTML iframe
HTML iframe

כפי שניתן לראות, השתמשנו באלמנט ה-iframe כך שיוצג לנו החלק העליון של האתר בחלון פנימי.
אם תנסו בעצמכם, תיווכחו לדעת שזה יותר מסתם view של אותו דף אינטרנט..
ניתן להשתמש בדף האינטרנט שמוכל בתוך iframe כמו שנוכל להשתמש בכל דף אינטרנט אחר.
כלומר שאם נלחץ על קישור שנמצא בתוך iframe, התצוגה תוחלף אל היעד שאליו ינווט הקישור.
את מסגרת החלון ופסי הגלילה ביטלנו באמצעות המאפיינים scrolling ו-frameborder.

הטמעת סרטונים מ-Youtube

על מנת להטמיע סרטון מ-Youtube בדף האינטרנט שלנו נפעל כך:

  • נלחץ על שיתוף סרטון ב-Youtube
  • נלחץ על הטמעה
  • נעתיק את קוד ה-iframe למקום הרצוי.
HTML iframe
HTML iframe
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello, World!</title>
    <h1>this is an exemple of our basic HTML Document with links & iframe</h1>
</head>
<body>
    <p>this is an exemple 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.
כעת דף האינטרנט שלנו נראה כך:

HTML Youtube iframe
HTML Youtube iframe

אפשרות נוספת הקשורה לתגית 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,
בפרק הבא של המדריך נלמד איך להוסיף לדף האינטרנט שלנו רשימות וטבלאות

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה?

גולשים יקרים, רוב התכנים המוצגים באתר נכתבים בהתנדבות מלאה מתוך כוונה להנגיש מידע עבורכם. אם נתקלתם במדריך חינמי שפתר לכם תקלה או לימד אתכם משהו חדש שלא ידעתם, וברצונכם לתגמל את כותב המדריך או סתם להזמין אותו לכוס קפה, הינכם יותר ממוזמנים לתרום.

כתיבת תגובה

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

גולשים יקרים, רוב התכנים המוצגים באתר נכתבים בהתנדבות מלאה מתוך כוונה להנגיש מידע עבורכם. אם נתקלתם במדריך חינמי שפתר לכם תקלה או לימד אתכם משהו חדש שלא ידעתם, וברצונכם לתגמל את כותב המדריך או סתם להזמין אותו לכוס קפה, הינכם יותר ממוזמנים לתרום.