🏞️ 👩‍👦 🏊 स्वचालित क्रॉस-डोमेन आइफ्रेम ऊंचाई सेटिंग 🏞️ 🔖 👩🏽‍🤝‍👨🏻

मुझे लगता है कि जिन लोगों ने अपने काम में iframes का सामना किया है, उनमें से कई ने इस iframe की ऊंचाई निर्धारित करने के कार्य का भी सामना किया है।

यह आवश्यक हो सकता है, उदाहरण के लिए, जब आप उपयोगकर्ताओं को अपनी साइट से अपनी साइट पर विजेट्स सक्षम करने के लिए सक्षम करना चाहते हैं, और आप विजेट के कंटेनर (iframe) को इस विजेट की सामग्री के आकार से मेल खाना चाहते हैं।

यैंडेक्स में, आप इस समस्या के कई समाधान पा सकते हैं, लेकिन उनमें से अधिकांश में एक समस्या है: वे विंडो का आकार बदलने की क्षमता का समर्थन नहीं करते हैं जब आईफ्रेम और माता-पिता की सामग्री अलग-अलग डोमेन पर होती है।

एक अच्छा क्रॉस-डोमेन समाधान है , लेकिन यह 2007 में लिखा गया था, और तब से बहुत कुछ बदल गया है। इसलिए, मुझे उपरोक्त समाधान के आधार पर, इस समस्या का हल स्वयं विकसित करना पड़ा।

दरअसल, जो मुख्य चीज बदल गई है वह है window.postMessage टूल, जो ब्राउज़र विंडो को संदेशों का आदान-प्रदान करने की अनुमति देता है। इसके लिए धन्यवाद, हम उपरोक्त समाधान का एक एनालॉग बना सकते हैं, जिसमें निम्नलिखित फायदे हैं:

नए ब्राउज़रों में हैश में कोई स्पैम नहीं होगा (और उसी समय क्लाइंट पेज पर हैश नेविगेशन सही ढंग से काम करेगा)
वेबकिट में सही काम
सरल और स्पष्ट कोड

हमारा कोड किसी भी बाहरी कारकों पर निर्भर नहीं होना चाहिए, और इसके उपयोग के लिए फ्रेम की सामग्री के किनारे पर 2 जेएस फ़ाइलों को जोड़ने के लिए पर्याप्त होना चाहिए (पोस्टमेज़ेज के लिए एक, और चोर - हमारा), और क्लाइंट की तरफ भी 2 जेएस फ़ाइलों को कनेक्ट करें और जोड़ें Iframe पर दो विशेषताएँ हैं - id और नाम (समान होना चाहिए), और ifload पर भी iframe पंजीकरण लटका हुआ है।

पोस्टमेज़ेज के साथ काम करने के लिए, हम निम्नलिखित लाइब्रेरी का उपयोग करेंगे:
postmessage.freebaseapps.com
यह लाइब्रेरी window.postMessage के लिए एक बहुत ही सुविधाजनक आवरण है, जो अन्य बातों के अलावा, आपको उन ब्राउज़रों में हैश के माध्यम से डेटा ट्रांसफर का उपयोग करने की अनुमति देता है जो window.postMessage का समर्थन नहीं करते हैं।

स्क्रिप्ट का तर्क बेहद सरल है - क्लाइंट पेज पर हम एक iframe "रजिस्टर" करते हैं - हम इस आइफ्रेम के पहचानकर्ता को चाइल्ड पेज (जो iframe में है) पर भेजते हैं और चाइल्ड पेज से संदेशों की सदस्यता लेते हैं। संदेश प्राप्त होने पर - आकार बदलें।

चाइल्ड पेज की तरफ (जो iframe में है), हम बदले में आने पर पंजीकरण संदेशों की सदस्यता लेते हैं - हम पहचानकर्ता को याद करते हैं और टाइमर को चालू करते हैं, जो, जब फ़्रेम सामग्री का आकार बदल जाता है, तो माता-पिता पृष्ठ को यह जानकारी भेजता है कि आइफ्रेम का आकार परिवर्तन किया जाना चाहिए।

बस इतना ही। स्क्रिप्ट कोड ही:

FrameManager.js ("क्लाइंट" स्क्रिप्ट)

var FrameManager = { registerFrame : function(frame) { pm({ target: window.frames[frame.id], type: "register", data: {id:frame.id}, url: frame.contentWindow.location }); pm.bind(frame.id, function(data) { var iframe = document.getElementById(data.id); if (iframe == null) return; iframe.style.height = (data.height+12).toString() + "px"; }); } };

फ़्रेम .js (फ़्रेम की सामग्री के लिए स्क्रिप्ट)

 var FrameHeightManager = { FrameId: '', getCurrentHeight : function() { myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { myHeight = window.innerHeight; } else if( document.documentElement && document.documentElement.clientHeight ) { myHeight = document.documentElement.clientHeight; } else if( document.body && document.body.clientHeight ) { myHeight = document.body.clientHeight; } return myHeight; }, publishHeight : function() { if (this.FrameId == '') return; //   jQuery -        if(typeof jQuery === "undefined") { var actualHeight = (document.body.scrollHeight > document.body.offsetHeight)?document.body.scrollHeight:document.body.offsetHeight; var currentHeight = this.getCurrentHeight(); } else { var actualHeight = $("body").height(); var currentHeight = $(window).height(); } if(Math.abs(actualHeight - currentHeight) > 20) { pm({ target: window.parent, type: this.FrameId, data: {height:actualHeight, id:this.FrameId} }); } } }; pm.bind("register", function(data) { FrameHeightManager.FrameId = data.id; //     this window.setInterval(function() {FrameHeightManager.publishHeight.call(FrameHeightManager)}, 300); });

और 2 परीक्षण HTML पृष्ठ लिखें:

test.html (मूल)

 <!DOCTYPE html> <html> <body> <script src="postmessage.js"></script> <script src="FrameManager.js"></script> <iframe height="10" id="frame1" name="frame1" src="test2.html" onload="FrameManager.registerFrame(this)" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" ></iframe> </body> </html>

test2.html (बच्चा)

 <!DOCTYPE html> <html> <body> <!--<script src="http://yandex.st/jquery/1.7.1/jquery.min.js"></script>--> <script src="postmessage.js"></script> <script src="Frame.js"></script> <div style="border:1px solid red;margin:0; height:200px;"> test </div> </body> </html>

बाल पृष्ठ में, आप jquery कनेक्शन के साथ कोड का एक टुकड़ा भी बेचैन कर सकते हैं - फिर ऊंचाई निर्धारित करना अधिक सटीक होगा। मैं पृष्ठ और खिड़की के आकार को निर्धारित करने के लिए सामान्य क्रॉस-ब्राउज़र कार्यों के लिए आभारी रहूंगा, मैंने पहले वाले का उपयोग किया, जो मुझे मिला - वे काम करते हैं, लेकिन वेबकिट में 10 पिक्सेल एक त्रुटि की अनुमति देते हैं।

यह मेरे लिए महत्वपूर्ण नहीं है, क्योंकि मेरे पास क्लाइंट की तरफ (यानी चाइल्ड पेज में) jquery है, लेकिन किसी के पास नहीं हो सकती है - फिर कोड अभी भी काम करेगा।

स्वचालित क्रॉस-डोमेन आइफ्रेम ऊंचाई सेटिंग

More articles: