آی‌فریم‌های واکنش‌گرا در کروم ۱۵۴

سباستین بنز
براموس

منتشر شده: ۱۶ سپتامبر ۲۰۲۶

کروم ۱۵۴ پشتیبانی از iframeهای با اندازه واکنش‌گرا را اضافه می‌کند که به <iframe> اجازه می‌دهد اندازه خود را بر اساس اندازه ذاتی سند جاسازی‌شده‌اش تنظیم کند. این ویژگی برای جاسازی یکپارچه ویجت‌های نظر شخص ثالث، جاسازی‌های رسانه‌های اجتماعی با ارتفاع متغیر یا هر نوع جاسازی دیگری که از <iframe> استفاده می‌کند، ایده‌آل است.

Browser Support

  • کروم: پشت یک پرچم.
  • لبه: پشت پرچم.
  • فایرفاکس: پشتیبانی نمی‌شود.
  • سافاری: پشتیبانی نمی‌شود.

Source

آی‌فریم‌های با اندازه واکنش‌گرا جایگزین الگوی رایجی می‌شوند که در آن توسعه‌دهندگان به صورت دستی محتوای آی‌فریم را اندازه‌گیری می‌کنند، ابعاد را با postMessage() ارسال می‌کنند و به صورت دستی اندازه آی‌فریم را در صفحه جاسازی به‌روزرسانی می‌کنند.

این ضبط، یک فرم نظردهی را نشان می‌دهد که با استفاده از یک iframe در یک صفحه جاسازی شده است. وقتی کاربر نظر خود را اضافه می‌کند، ارتفاع iframe درون صفحه جاسازی به صورت پویا به‌روزرسانی می‌شود و یک تجربه بصری یکپارچه و بدون هیچ گونه نوار پیمایشی ایجاد می‌کند.

اندازه یک iframe را با محتوای آن مطابقت دهید

به طور پیش‌فرض، یک iframe دارای viewport مخصوص به خود است. اگر سند جاسازی شده بلندتر از آن viewport باشد، کاربران ممکن است یک scrollbar اضافی دریافت کنند. با اندازه‌بندی 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 اکنون می‌تواند به جای اینکه مانند یک viewport با ارتفاع ثابت رفتار کند، از ارتفاع محتوای سند جاسازی شده استفاده کند.

استفاده از 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 های cross-origin استفاده شود. سند جاسازی‌شده می‌تواند مبداهای مجاز را محدود کند:

<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 واکنش‌گرا را امتحان کنید: