Chrome 154 में रिस्पॉन्सिव iframe

Sebastian Benz
Bramus

पब्लिश होने की तारीख: 16 सितंबर, 2026

Chrome 154 में, स्क्रीन के हिसाब से अपने-आप अडजस्ट होने वाले iframe की सुविधा जोड़ी गई है. इससे <iframe>, एम्बेड किए गए दस्तावेज़ के मूल साइज़ के हिसाब से अपने-आप अडजस्ट हो जाता है. यह तीसरे पक्ष के टिप्पणी विजेट, अलग-अलग ऊंचाई वाले सोशल मीडिया एम्बेड या <iframe> का इस्तेमाल करने वाले किसी अन्य तरह के एम्बेड को आसानी से एम्बेड करने के लिए सबसे सही है.

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: not supported.
  • Safari: not supported.

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 को सीएसएस की अन्य पाबंदियों के साथ भी जोड़ा जा सकता है:

.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 के साइज़ को आज़माएं: