कैसे एक आइफ्रेम की ऊंचाई को गतिशील रूप से इसकी सामग्री की ऊंचाई के बराबर सेट करें

Unsplash पर क्रिस्टोफर रॉबिन एबिंगहॉस द्वारा फोटो

हाल ही में मैं रिएक्ट ऐप्स पर बहुत काम कर रहा हूं जो एक वेबसाइट पर एक iframe के माध्यम से होस्ट किए जाते हैं।

मेरे द्वारा चलाए जा रहे एक कठिनाई यह है कि एक iframe की ऊंचाई निर्धारित करना गतिशील नहीं है, इसलिए यदि iframe के भीतर पृष्ठ की ऊंचाई को अपडेट किया जाता है, तो मूल दस्तावेज़ को iframe की ऊँचाई सेट करना नहीं पता है। मैं वास्तव में iframe को उस वेबसाइट पर समेकित रूप से एकीकृत करना चाहता हूं जिस पर वह होस्ट किया गया है, इसलिए उसके माध्यम से स्क्रॉल करना एक विकल्प नहीं था।

नोट: ऐसा करने के लिए, हमें iframe के साथ-साथ मूल दस्तावेज दोनों सामग्री के कोडबेस तक पहुंच की आवश्यकता होगी।

चरण 1: बच्चा

बच्चे में (वह पेज जो आईफ्रेम के अंदर होगा) हमें कुछ जावास्क्रिप्ट जोड़ने की जरूरत है जो पेज की ऊंचाई की गणना करेगा और इसे एक ईवेंट संदेश के माध्यम से भेजेगा।

यहां हम एक म्यूटेशन ऑब्जर्वर का उपयोग करते हैं जो एक संदेश पोस्ट करेगा जिसे मूल दस्तावेज़ तब सुन सकते हैं। तब हम फ़ंक्शन चलाते हैं जब शरीर तत्व लोड होता है।

चरण 2: माता-पिता

यह हिस्सा काफी सीधा है, हम जो कुछ भी कर रहे हैं वह संदेश पोस्ट करने के लिए iframe में कोड के लिए सुन रहा है, फिर iframe की ऊंचाई को उस मान के बराबर सेट करता है जिसे हम पुनः प्राप्त करते हैं। फिर, हमें यह सुनिश्चित करने की आवश्यकता है कि iframe हमारे कार्य को onLoad विशेषता का उपयोग करके लोड करेगा।

बक्शीश

IFrames के साथ एक और चाल मैंने हाल ही में सीखा है कि आप अपने माता-पिता के दस्तावेज़ में एक आईडी से लिंक कर सकते हैं। आपको केवल लक्ष्य विशेषता को इस तरह सेट करना है:

पितृपक्ष में कहीं से लिंक करें