‏کروم ۱۵۴: آی‌فریم خودش به قد محتواش درمیاد

به نوشتهٔ Bramus، از کروم ۱۵۴ می‌شه یه رو جوری تنظیم کرد که قد و اندازه‌ش رو با محتوای داخل خودش هماهنگ کنه. تا امروز برای این کار باید با اسکریپت، ارتفاع رو از داخل فریم به صفحهٔ بیرونی پاس می‌دادی؛ حالا خود مرورگر این کارو انجام می‌ده.

راه‌اندازیش دوطرفه‌ست و هر دو سمت باید رضایت بدن. سمت صفحهٔ میزبان، روی آی‌فریم پراپرتی تازهٔ frame-sizing رو ست می‌کنی که مقدارهای auto، content-height و content-width و معادل‌های منطقی‌شون رو قبول می‌کنه:

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

سمت صفحه‌ای هم که داخل فریم لود می‌شه باید یه متاتگ بذاری تا اجازه بده اندازه‌ش به والد گزارش بشه. با allow-origins مشخص می‌کنی این اطلاعات فقط به کدوم originها برسه:

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

اندازه بعد از لود شدن صفحه یه بار اعلام می‌شه. اگه محتوا بعداً عوض شد، مثلاً فرم چندمرحله‌ای رفت مرحلهٔ بعد، صفحهٔ داخل فریم باید خودش window.requestResize() رو صدا بزنه تا اندازهٔ جدید بره بالا. دموی نویسنده هم دقیقاً همینه: یه فرم که با هر مرحله بدون اسکرول‌بار کوچیک و بزرگ می‌شه.

فعلاً این قابلیت فقط تو موتور Blink یعنی کروم ۱۵۴ کار می‌کنه. فایرفاکس (Gecko) و سافاری (WebKit) هیچ‌کدوم پشتیبانی ندارن و به گفتهٔ نویسنده حتی باگ ثبت‌شده‌ای برای پیگیریش هم باز نشده، پس هنوز باید راه‌حل قدیمی رو به‌عنوان فالبک نگه داری.

نکات کلیدی:

• پراپرتی frame-sizing تو کروم ۱۵۴ اومده و مقدارهاش auto، content-height و content-width هستن.
• صفحهٔ داخل فریم بدون متاتگ responsive-embedded-sizing اندازه‌ش رو نمی‌فرسته.
• با allow-origins تعیین می‌کنی اندازه به کدوم دامنه‌ها گزارش بشه.
• برای تغییر اندازه بعد از لود، window.requestResize() باید صدا زده بشه.
• فایرفاکس و سافاری صفر پشتیبانی دارن و باگ ردیابی هم ندارن.