iframe سال‌ها یکی از راه‌های ساده برای نمایش محتوای سرویس‌های دیگر، فرم‌های آنلاین، ویدئوها، نقشه‌ها و ابزارهای تعاملی در یک صفحهٔ وب بوده است. بااین‌حال، اندازهٔ ثابت iframe معمولاً دردسرهایی مثل اسکرول‌بار داخلی، فضای خالی، بریدگی محتوا و جابه‌جایی چیدمان ایجاد می‌کند. در بسیاری از پروژه‌ها، توسعه‌دهنده مجبور می‌شود ارتفاع محتوای داخل iframe را با JavaScript، postMessage() و اندازه‌گیری‌های دستی هماهنگ کند.
Chrome ۱۵۴ یک قابلیت تازه برای حل بخشی از این مشکل ارائه می‌کند: iframeهای واکنش‌گرا می‌توانند اندازهٔ خود را بر اساس محتوای سند داخلی تنظیم کنند. این قابلیت برای ویجت‌های نظرات، محتوای شبکه‌های اجتماعی، فرم‌های متغیر و هر embedی که ارتفاع ثابتی ندارد، کاربردی است.
iframeهای واکنش‌گرا چه مشکلی را حل می‌کنند؟
در روش قدیمی، iframe یک viewport مستقل دارد. اگر محتوای داخلی از ارتفاع تعیین‌شده بیشتر باشد، کاربر با یک اسکرول‌بار اضافه روبه‌رو می‌شود. اگر ارتفاع را بیش از اندازه بزرگ انتخاب کنیم، فضای خالی به وجود می‌آید و ظاهر صفحه در موبایل و دسکتاپ یکسان باقی نمی‌ماند. این مشکل در صفحه‌هایی که چند ابزار خارجی دارند، بیشتر دیده می‌شود.
iframeهای واکنش‌گرا این رابطه را ساده‌تر می‌کنند. به‌جای اینکه کد میزبان دائماً ارتفاع سند داخلی را محاسبه کند، مرورگر می‌تواند ارتفاع iframe را از محتوای واقعی آن بگیرد. نتیجه، تجربه‌ای طبیعی‌تر و کدی کم‌حجم‌تر است؛ البته پشتیبانی مرورگر و رفتار محتوای داخلی باید همچنان بررسی شود.
روش استفاده از قابلیت جدید
در صفحهٔ میزبان، می‌توان ویژگی frame-sizing را روی iframe قرار داد. این روش، هستهٔ پیاده‌سازی iframeهای واکنش‌گرا در یک پروژهٔ معمولی است:
“`html <style> .embed { width: 100%; frame-sizing: content-height; } </style>
<iframe class=”embed” src=”/comments.html” title=”نظرات کاربران”></iframe> “`
سند داخلی iframe نیز باید از قابلیت اندازه‌گذاری واکنش‌گرا پشتیبانی کند. برای این کار، meta tag مربوط باید از ابتدا داخل <head> سند قرار بگیرد:
“`html <meta name=”responsive-embedded-sizing” content=”allow-origins=*”> “`
قرار دادن این meta tag بعد از بارگذاری صفحه کافی نیست. اگر iframe از یک مبدأ دیگر بارگذاری می‌شود، بهتر است به‌جای * فقط مبدأهای مورداعتماد را مشخص کنید. این کار کنترل بیشتری روی embedهای cross-origin می‌دهد و با سیاست‌های امنیتی دیگر مثل frame-ancestors قابل ترکیب است.
اگر محتوای iframe بعداً تغییر کند چه؟
مرورگر همهٔ تغییرات بعدی layout را به‌صورت مداوم رصد نمی‌کند. اگر داخل iframe بعد از بارگذاری اولیه، محتوای بیشتری اضافه می‌شود یا یک بخش باز و بسته می‌شود، سند داخلی می‌تواند پس از پایان تغییر، window.requestResize() را فراخوانی کند. این مدل صریح کمک می‌کند از حلقه‌های تغییر اندازه و reflowهای غیرضروری جلوگیری شود.
برای پروژه‌های واقعی، این قابلیت را مرحله‌ای آزمایش کنید. ابتدا یک fallback با height معمولی نگه دارید و با feature query بررسی کنید آیا frame-sizing در مرورگر فعال است یا نه. در این مرحله، رفتار iframeهای واکنش‌گرا را در چند اندازهٔ صفحه ثبت کنید. همچنین اگر iframe در اولین نمای صفحه قرار دارد، تغییر ارتفاع هنگام بارگذاری می‌تواند باعث جابه‌جایی محتوا شود و روی Core Web Vitals اثر بگذارد. رزرو فضای مناسب، تست در موبایل و اندازه‌گیری CLS همچنان ضروری است.
جمع‌بندی برای توسعه‌دهندگان وب
iframeهای واکنش‌گرا قرار نیست همهٔ مشکلات embed را خودکار حل کنند، اما برای بسیاری از سناریوها حجم کد هماهنگ‌سازی را کاهش می‌دهند. استفاده از frame-sizing: content-height، meta tag مناسب، محدودکردن originها و نگه‌داشتن fallback، مسیر منطقی برای شروع است. در کنار آن، عملکرد، دسترسی‌پذیری، عنوان iframe و تجربهٔ کاربر را بررسی کنید.
اگر روی بهینه‌سازی تجربهٔ کاربری سایت کار می‌کنید، این قابلیت را در یک صفحهٔ آزمایشی پیاده‌سازی و با ابزارهای توسعه‌دهندهٔ مرورگر مقایسه کنید. برای آشنایی بیشتر با مسیرهای طراحی و توسعهٔ سایت، بخش مقالات آموزشی تکتاز را نیز ببینید.
منبع رسمی: Responsive iframes in Chrome 154
پرسش‌های متداول
آیا iframeهای واکنش‌گرا برای همهٔ مرورگرها فعال هستند؟
پشتیبانی مرورگرها یکسان نیست؛ بنابراین fallback و feature query را حذف نکنید و قبل از انتشار عمومی، نسخه‌های هدف پروژه را آزمایش کنید.
آیا این قابلیت جایگزین کامل JavaScript می‌شود؟
برای بسیاری از embedهای ساده می‌تواند نیاز به اندازه‌گیری دستی را کم کند، اما در محتوای پویا یا سناریوهای پیچیده هنوز ممکن است به requestResize() یا منطق تکمیلی نیاز داشته باشید.
**آیا استفاده از allow-origins=* همیشه مناسب است؟**
خیر. برای پروژهٔ واقعی، originهای موردنیاز را محدود کنید و کنترل‌های امنیتی iframe و سیاست‌های Content Security Policy را جداگانه بررسی کنید.
منبع: Chrome for Developers، منتشرشده در ۱۶ سپتامبر ۲۰۲۶.
