תיעוד HTML עם דוגמאות להרצה: התגית iframe

Q: למה ה-iframe שלי אומר שהאתר סירב להתחבר?

האתר שולח כותרת X-Frame-Options או Content-Security-Policy: frame-ancestors שאוסרת על אתרים אחרים להציג אותו במסגרת. אתרים רבים עושים את זה כדי למנוע clickjacking. אי אפשר לעקוף את זה מהעמוד שלכם; השתמשו בכתובת ההטמעה הרשמית של האתר אם יש לו כזו.

Q: איך מסירים את הגבול של iframe?

הגדירו border: 0 ב-CSS. המאפיין הישן frameborder="0" מיושן, אף שקודי הטמעה רבים שמועתקים עדיין כוללים אותו.

Q: איך הופכים iframe לרספונסיבי?

תנו לו width: 100% ו-aspect-ratio ב-CSS, למשל aspect-ratio: 16 / 9 לווידאו, ואל תגדירו גובה קבוע. ה-iframe משתנה אז יחד עם המכל שלו ושומר על הצורה שלו.

Q: מה עושה המאפיין sandbox על iframe?

מאפיין sandbox ריק חוסם סקריפטים, שליחת טפסים, חלונות קופצים ועוד בתוך המסגרת, ומתייחס לתוכן שלה כאילו הוא מגיע ממקור ייחודי. אחר כך מתירים רק את מה שההטמעה צריכה עם מילות מפתח כמו allow-scripts או allow-forms.

איך משתמשים ב-iframe

<iframe> מציג עמוד אחר בתוך העמוד שלכם. תנו לו את כתובת העמוד ב-src, title שמתאר אותו, וגודל:

<iframe src="https://example.com/" title="Example site" width="600" height="400"></iframe>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    p { color: #2563eb; font-weight: 600; }
  </style>
</head>
<body>
  <p>This paragraph is in the outer page.</p>
  <iframe title="Inner page" width="320" height="120"
    srcdoc="<h1 style='font: 20px system-ui'>Hello from inside the frame</h1><p>The outer page's CSS does not reach me.</p>">
  </iframe>
</body>
</html>

הפסקה החיצונית כחולה ומודגשת; הפסקה שבתוך המסגרת לא, למרות שאותו כלל p נמצא בעמוד. עיצוב אף פעם לא חוצה את גבול המסגרת, לאף כיוון. הגבול של ברירת המחדל וגודל ברירת המחדל של 300×150 מגיעים מהדפדפן; המאפיינים width ו-height גוברים על הגודל.

הטמעת סרטון YouTube או מפה

אתרי וידאו ושירותי מפות נותנים לכם קוד iframe מוכן. ב-YouTube, לחצו על Share, ואז על Embed:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

ב-Google Maps, פתחו את המקום, לחצו על Share, ואז על Embed a map, והעתיקו את ה-iframe באותה צורה. השאירו את ה-title (קוראי מסך מכריזים עליו כשנכנסים למסגרת) והחליפו גדלים קבועים ב-CSS הרספונסיבי שלמטה. המאפיין allow מעניק למסגרת יכולות כמו ניגון אוטומטי או מסך מלא, שכבויות כברירת מחדל בעמודים מוטמעים.

גודל, גבול ו-iframe רספונסיבי

קודי הטמעה שמועתקים משתמשים בגדלים קבועים בפיקסלים, שחורגים מהמסך בטלפונים. width: 100% יחד עם aspect-ratio גורמים למסגרת למלא את המכל שלה ולשמור על הצורה שלה, ו-border: 0 מסיר את גבול ה-inset של ברירת המחדל:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Responsive iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .embed {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: 8px;
      background: #111827;
    }
    .wrap { max-width: 480px; }
  </style>
</head>
<body>
  <div class="wrap">
    <iframe class="embed" title="Video placeholder"
      srcdoc="<body style='margin:0;height:100vh;display:grid;place-items:center;color:#fff;font:16px system-ui'>16:9 frame">
    </iframe>
  </div>
</body>
</html>

שנו את max-width: 480px לערך אחר והמסגרת תשמור על צורת 16:9 שלה בכל רוחב. הסירו את border: 0 כדי לראות את גבול ברירת המחדל של הדפדפן. המאפיינים הישנים frameborder, scrolling ו-marginheight מיושנים; השתמשו ב-CSS.

sandbox: הגבלת מה שהמסגרת יכולה לעשות

מסגרת יכולה להריץ סקריפטים, לשלוח טפסים ולפתוח חלונות קופצים כמו כל עמוד. המאפיין sandbox לוקח ממנה את היכולות האלה; sandbox ריק חוסם כמעט הכל, וכל מילת מפתח מחזירה יכולת אחת. שתי המסגרות שלמטה מקבלות את אותו HTML עם סקריפט קטן:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sandbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { width: 240px; height: 70px; border: 2px solid #e5e7eb; border-radius: 6px; }
    code { display: block; margin: 8px 0 4px; }
  </style>
</head>
<body>
  <code>sandbox=""</code>
  <iframe id="a" sandbox="" title="Sandboxed frame"></iframe>
  <code>sandbox="allow-scripts"</code>
  <iframe id="b" sandbox="allow-scripts" title="Frame with scripts allowed"></iframe>
  <script>
    const html = '<p id="s" style="font: 15px system-ui">Scripts are blocked</p>' +
      '<script>document.getElementById("s").textContent = "JavaScript ran";<\/script>';
    document.getElementById('a').srcdoc = html;
    document.getElementById('b').srcdoc = html;
  </script>
</body>
</html>

המסגרת הראשונה שומרת על טקסט ה-placeholder שלה כי הסקריפט שלה אף פעם לא רץ (הקונסול של Chrome רושם עבורה הודעת "Blocked script execution"). השתמשו ב-sandbox בכל פעם שאתם מציגים במסגרת תוכן שאתם לא סומכים עליו לגמרי, כמו HTML שמשתמשים כתבו, והוסיפו רק את מילות המפתח שהוא צריך:

מילת מפתח	מתירה
`allow-scripts`	הרצת JavaScript
`allow-forms`	שליחת טפסים
`allow-popups`	`window.open` וקישורי `target="_blank"`
`allow-modals`	`alert()`, `confirm()` ו-`prompt()`
`allow-same-origin`	התייחסות לתוכן כאל המקור האמיתי שלו (cookies, אחסון)
`allow-top-navigation`	ניווט של הלשונית כולה הרחק מהעמוד שלכם

לעולם אל תשלבו allow-scripts ו-allow-same-origin עבור תוכן מהמקור שלכם: הסקריפט שבמסגרת יוכל אז להסיר את ה-sandbox של עצמו.

תקשורת עם מסגרת: postMessage

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>postMessage</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { display: block; width: 280px; height: 80px; margin-top: 10px; border: 2px solid #2563eb; border-radius: 6px; }
  </style>
</head>
<body>
  <input id="msg" value="Hello, frame">
  <button id="send">Send</button>
  <iframe id="frame" title="Message receiver" srcdoc="
    <p style='font: 15px system-ui' id='got'>Waiting for a message</p>
    <script>
      addEventListener('message', (e) => {
        document.getElementById('got').textContent = 'Received: ' + e.data;
      });
    </script>">
  </iframe>
  <script>
    document.getElementById('send').onclick = () => {
      const frame = document.getElementById('frame');
      frame.contentWindow.postMessage(document.getElementById('msg').value, '*');
    };
  </script>
</body>
</html>

בקוד אמיתי, העבירו את המקור המדויק של המסגרת (כמו 'https://maps.example.com') במקום '*', ובדקו את e.origin אצל המקבל, כך שהודעות יישלחו רק לאתר שאתם מצפים לו ויתקבלו רק ממנו.

ביצועים ומה קורה כשאתר מסרב

טעינה עצלה. הוסיפו loading="lazy" למסגרות שנמצאות רחוק למטה בעמוד; הדפדפן טוען אותן רק כשהקורא גולל קרוב אליהן. כל iframe הוא טעינה מלאה של עמוד, כך שעמוד עם הרבה הטמעות נהיה איטי בלי זה.
"Refused to connect". אתרים רבים (בנקים, רוב הרשתות החברתיות, חיפוש Google) שולחים כותרת X-Frame-Options או frame-ancestors שאוסרת הצגה במסגרת, והדפדפן מציג שגיאה במסגרת. העמוד שלכם לא יכול לעקוף את זה. השתמשו בכתובת ההטמעה הרשמית של האתר, או בקישור.
נגישות. תמיד הגדירו title. כך קורא מסך נותן שם למסגרת, ובעמוד עם כמה מסגרות בלי כותרת קשה להתמצא.

טעויות נפוצות

title חסר. קוראי מסך מכריזים על המסגרת כחסרת שם.
רוחב קבוע מקוד הטמעה שהועתק. החליפו אותו ב-width: 100% וב-aspect-ratio.
הצגת קובץ וידאו רגיל במסגרת. לקובץ .mp4 משלכם, השתמשו באלמנט video; מסגרות iframe מיועדות לעמודים.
אמון בתוכן שבמסגרת. הוסיפו sandbox לכל דבר שלא אתם כתבתם.
ציפייה ש-CSS חיצוני יעצב את המסגרת. עצבו את העמוד שבמסגרת מתוכו.

שאלות נפוצות

מה זה iframe ב-HTML?

<iframe> (inline frame, מסגרת מוטבעת) היא תיבה שמציגה עמוד אינטרנט נפרד בתוך העמוד הנוכחי. יש לה מסמך, עיצוב וסקריפטים משלה, ולכן משתמשים בה להטמעות כמו סרטונים, מפות, פרסומות ותצוגות מקדימות של קוד.

איך מטמיעים סרטון YouTube עם iframe?

ב-YouTube, בחרו Share, אחר כך Embed, והעתיקו את הקוד. זה iframe שה-src שלו הוא https://www.youtube.com/embed/ ועוד מזהה הסרטון. השאירו את המאפיינים title ו-allowfullscreen, והשתמשו ב-CSS aspect-ratio: 16 / 9 עם width: 100% כדי להפוך אותו לרספונסיבי.

למה ה-iframe שלי אומר שהאתר סירב להתחבר?

האתר שולח כותרת X-Frame-Options או Content-Security-Policy: frame-ancestors שאוסרת על אתרים אחרים להציג אותו במסגרת. אתרים רבים עושים את זה כדי למנוע clickjacking. אי אפשר לעקוף את זה מהעמוד שלכם; השתמשו בכתובת ההטמעה הרשמית של האתר אם יש לו כזו.

איך מסירים את הגבול של iframe?

הגדירו border: 0 ב-CSS. המאפיין הישן frameborder="0" מיושן, אף שקודי הטמעה רבים שמועתקים עדיין כוללים אותו.

איך הופכים iframe לרספונסיבי?

תנו לו width: 100% ו-aspect-ratio ב-CSS, למשל aspect-ratio: 16 / 9 לווידאו, ואל תגדירו גובה קבוע. ה-iframe משתנה אז יחד עם המכל שלו ושומר על הצורה שלו.

מה עושה המאפיין sandbox על iframe?

מאפיין sandbox ריק חוסם סקריפטים, שליחת טפסים, חלונות קופצים ועוד בתוך המסגרת, ומתייחס לתוכן שלה כאילו הוא מגיע ממקור ייחודי. אחר כך מתירים רק את מה שההטמעה צריכה עם מילות מפתח כמו allow-scripts או allow-forms.

מושגים קשורים