‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

מסגרות iframe רספונסיביות ב-Chrome 154

Sebastian Benz

Bramus

תאריך פרסום: 16 בספטמבר 2026

ב-Chrome 154 נוספה תמיכה במסגרות iframe בגודל דינמי, שמאפשרות ל-<iframe> לשנות את הגודל שלו בהתאם לגודל המובנה של המסמך המוטמע. התכונה הזו מושלמת להטמעה חלקה של ווידג'טים של תגובות מצד שלישי, הטמעות של רשתות חברתיות בגבהים שונים או כל סוג אחר של הטמעה שמשתמשת ב-<iframe>.

Browser Support

Source

מסגרות iframe בגודל רספונסיבי מחליפות תבנית נפוצה שבה מפתחים מודדים באופן ידני את תוכן ה-iframe, שולחים מימדים באמצעות postMessage() ומעדכנים באופן ידני את גודל ה-iframe בדף ההטמעה.

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

שינוי הגודל של iframe בהתאם לתוכן

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

.embed {
  width: 100%;
  frame-sizing: content-height;
}

צריך להביע הסכמה להטמעה של המסמך:

<meta name="responsive-embedded-sizing" content="allow-origins=*">

דוגמה מלאה:

<style>
  .embed {
    width: 100%;
    frame-sizing: content-height;
  }
</style>
<iframe class="embed" src="/comments.html" title="Comments">
</iframe>

וב-/comments.html:

<!doctype html>
<html>
  <head>
    <meta name="responsive-embedded-sizing" content="allow-origins=*">
  </head>
  <body>
    ...
  </body>
</html>

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

שימוש ב-`frame-sizing`

המאפיין החדש frame-sizing קובע איזו מדידה נגזרת מהתוכן של ה-iframe.

הערכים הנתמכים כוללים:

frame-sizing: auto;
frame-sizing: content-width;
frame-sizing: content-height;
frame-sizing: content-inline-size;
frame-sizing: content-block-size;

‫auto שומרת על התנהגות קיימת של שינוי הגודל של ה-iframe.

ברוב מצבי הכתיבה האופקיים, הערכים content-height ו-content-block-size הם הכי שימושיים להרחבת הטמעות אנכיות.

אפשר גם לשלב את frame-sizing עם אילוצים אחרים של CSS:

.embed {
  width: 100%;
  max-height: 80vh;
  frame-sizing: content-height;
}

שינוי גודל אחרי שינויים בתוכן דינמי

הדפדפן לא עוקב באופן רציף אחרי כל שינוי בפריסה בתוך המסמך המוטמע.

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

async function loadMore() {
  const items = await fetchMoreItems();
  renderItems(items);
  window.requestResize();
}

מומלץ להתקשר אל window.requestResize() לפני הפריסה, אחרי שכל השינויים במסמך בוצעו. מודל העדכון המפורש הזה עוזר למנוע לולאות שינוי גודל, שבהן שינוי הגודל של ה-iframe משנה את אזור התצוגה שלו, מה שמשנה את התוכן שלו, מה שמשנה שוב את הגודל שלו.

הטמעות ממקורות שונים

אפשר להשתמש בשינוי גודל רספונסיבי גם עם iframe ממקורות שונים. המסמך המוטמע יכול להגביל את המקורות שמותרים:

<meta
  name="responsive-embedded-sizing"
  content="allow-origins=https://publisher.example">

הגודל הרספונסיבי יוגבל ל-https://publisher.example בלבד. אם יש כמה מקורות, צריך להפריד ביניהם באמצעות רווח: content="allow-origins=https://publisher1.example https://publisher2.example".

בווידג'טים של צד שלישי, מגבילים את הגישה למקורות שזקוקים לה. המנגנון הזה משלים את אמצעי הבקרה הקיימים לאבטחת iframe, כמו ההוראה frame-ancestors של מדיניות אבטחת התוכן, שקובעת אילו אתרים יכולים להטמיע דף.

שיפור הדרגתי

אתם יכולים להשתמש בשאילתות של תכונות כדי לשמור על חלופה קיימת לדפדפנים שלא תומכים ב-frame-sizing:

.widget {
  width: 100%;
  height: 500px;
}

@supports (frame-sizing: content-height) {
  .widget {
    height: auto;
    frame-sizing: content-height;
  }
}

אם המסמך המוטמע מתעדכן באופן דינמי, אפשר גם לבצע זיהוי תכונות requestResize():

if ("requestResize" in window) {
  window.requestResize();
}

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

אני רוצה לנסות

אפשר לנסות לשנות את הגודל של iframe רספונסיבי בהדגמה הבאה: