बूटस्ट्रैप मोडल आइफ्रेम क्रच

"नहीं, मैं खुद"
इटालियन लंगड़ा

समस्या का बयान

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

उन्होंने तुरंत स्पष्ट कर दिया कि साझेदार, हालांकि साझेदार, कुछ भी जटिल होस्ट नहीं करेंगे, अर्थात, वे jQuery के बारे में भूल गए थे। मानक समाधान नंगे जावास्क्रिप्ट पर न्यूनतम आकार के साथ एक आइफ्रेम है ।




ASP.NET MVC बैकएंड के रूप में, एज़्योर में सब कुछ है, स्टोरेज में चित्र, एसक्यूएल में टेबल। हाल ही में, रेडमंड सक्रिय रूप से अपने दृश्यपटल के रूप में बूटस्ट्रैप टेम्पलेट की सिफारिश करता है। वास्तव में, कोई भी इसके खिलाफ नहीं है, क्योंकि पहले जो पेशकश की गई थी, उसकी तुलना करके, बूटस्ट्रैप सिर्फ एक छुट्टी है।

मुख्य कार्यान्वयन समस्या माता-पिता की ऊंचाई में एक आइफ्रेम ओवरलैपिंग से पॉप-अप है। आपकी साइट पर आप मूल आइफ्रेम के माध्यम से मोडल को सुरक्षित रूप से कॉल कर सकते हैं, लेकिन इस मामले में आईफ्रेम डोमेन अलग है और ब्राउज़र को संरक्षित किया जाएगा। वह कोर्स है । भागीदारों के पास एक लक्ष्य निर्धारित करके अपने वेब सर्वर पर मजेदार और सौहार्दपूर्ण सत्तारूढ़ विन्यास है।
यदि आप संबद्ध साइटों को नहीं छू सकते हैं, तो आप हमारे आइफ्रेम को छू सकते हैं।

निर्णय

क्रच: खुले हुए मोडल विंडो के नीचे की पृष्ठभूमि में, iframe की ऊँचाई को छोटा करें ताकि मोडल पूरी तरह से या लगभग पूरी तरह से फिट हो जाए।

कार्यान्वयन

HTML5 API window.postMessage पर । कई jQuery पुस्तकालयों एक गतिशील आकार ifram की घोषणा कर रहे हैं। लेकिन, सबसे पहले, इसमें साझेदार साइटों की तरफ से पुस्तकालयों को जोड़ना शामिल है, दूसरे, इस कार्य की बहुत कम आवश्यकता है, और तीसरा, जब इन पुस्तकालयों की जाँच मोडल खिड़की से सामना नहीं कर सकती है।

हमारे iframe का HTML

<div class="container" id="mainContent"> <div class="row"><h1>Some iframe</h1></div> … <a href="#" class="btn btn-default" id="openBtn">Open modal</a> </div> <!-- Modal --> <div id="myModal" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content" id="myModalContent"> … </div> </div> </div> 

जावास्क्रिप्ट iframe'a onLoad

 // Modal  $('#openBtn').click(function () { $('#myModal').modal({ show: true }) }); //  Modal      Modal  $('#myModal').on('shown.bs.modal', function (e) { /* *   ,              */ parent.postMessage($("#myModalContent").height(), "*"); }); //  Modal       Modal  $('#myModal').on('hidden.bs.modal', function (e) { parent.postMessage($("#mainContent").height() + 1, "*"); }); //   iframe (+1 –  ) parent.postMessage($("#mainContent").height() + 1, "*"); 

Bootply पर iframe का पूरा कोड

पार्टनर साइड HTML

 <iframe id="myIframe" src="http://bootply.com/render/112265" width="100%" scrolling="no"></iframe> 

भागीदारों के पक्ष में जावास्क्रिप्ट यहां कॉमरेड ने कॉम्पैक्ट बनाया

 var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; var eventer = window[eventMethod]; var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; eventer(messageEvent, function (e) { //    if (e.origin !== "http://www.bootply.com") retrurn; // resize document.getElementById('myIframe').style.height = e.data + 'px'; }, false); 

पूर्ण Jsfiddle साथी कोड

Jsfiddle पर, Bootply से एक iframe लोड किया गया है, लेकिन Bootply एक अन्य iframe में लपेटता है जिसे निकालने की आवश्यकता है (आकृति देखें)।

सामान्य आकार जोड़ना भी अच्छा है:

 $(window).resize(function () { //     Modal if ($('#myModal').hasClass('in') == false) parent.postMessage($("#mainContent").height() + 1, "*"); }); 

पूर्ण स्क्रीन परिणाम , लेकिन फिर से जरूरत है

निष्कर्ष

एचटीएमएल 5 ने हमें लाइव व्यापार परिदृश्य में एक बहुत ही काम करने वाला बैसाखी प्रदान किया है, जहां अंतिम उपयोगकर्ता अपने द्वारा दिए गए सामानों के बारे में विस्तार से अध्ययन करने में सक्षम होगा, और अपने सहयोगियों के साथ ग्राहक के व्यापार महासंघ संभवतः वित्तीय संसाधनों के संचय की गतिशीलता में वृद्धि करेगा।