تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

إطارات iframe المتجاوبة في الإصدار 154 من Chrome

Sebastian Benz

Bramus

تاريخ النشر: 16 سبتمبر 2026

يتيح الإصدار 154 من Chrome إطارات 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 المتجاوب في العرض التوضيحي التالي: