एक छिपे हुए आइफ्रेम में अतुल्यकालिक छवि लोड हो रहा है: नुकसान

हाल ही में मुझे सर्वर पर एक फोटो अपलोडर करना पड़ा। चूंकि हमारे पास पहले से ही थर्ड-पार्टी स्क्रिप्ट का उपयोग करने का अनुभव था, और उन्हें खरोंच से अंतिम रूप देने के लिए अक्सर अधिक समय था, हमने खुद को एक बूटलोडर बनाने का फैसला किया।

Google तक पहुँचते समय, यह iframes के माध्यम से फ़ाइलों को डाउनलोड करने पर बहुत सारे लेख देता है। एल्गोरिथ्म आम तौर पर कम कर देता है:
1) एक छिपा हुआ फ्रेम बनाएं (आमतौर पर एचटीएमएल और सीएसएस गुणों के माध्यम से चौड़ाई और ऊंचाई को सरल रूप से स्पष्ट किया जाता है)
2) फ्रेम के नाम पर फॉर्म की कार्रवाई सेट करें।
3) फ़ाइल भेजें। हम आनन्दित होते हैं।

उपयोग में आसानी के लिए, एक अलग "स्टार्ट डाउनलोड" बटन नहीं बनाया गया था, लेकिन फ़ाइल इनपुट के लिए ऑनचेंज हैंडलर को लटका दिया गया था।


आगे का परीक्षण: क्रोम 9,10,11; फ़ायरफ़ॉक्स 3.6 (चौथा अभी तक जारी नहीं किया गया है); ओपेरा 9,10,11; IE 6 और IE 8, जिसमें IE 7 के साथ संगतता मोड में शामिल हैं। क्रोम, ओपेरा, और एफएफ लिनक्स और विंडोज दोनों पर परीक्षण किए गए थे। उड़ान सामान्य है, परीक्षण टीम गुजर गई। हम साइट के लाइव संस्करण को भेजते हैं।

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

पहली गड़बड़ मिली IE 7. में थी और यह ऑनकेंज इवेंट हैंडलर के बारे में थी। जैसा कि यह निकला, यह एक ज्ञात बग है - जब IE7 में DOM ट्री को बदलते हैं, तो onChange कहा जाता है। इसमें, JS कोड HTML डॉक्यूमेंट की संरचना को बदल देता है। यह फिर से onChange कहता है। यानी यह दौड़ की स्थिति को दर्शाता है और IE7 केवल परिवर्तनों को अनदेखा करता है और एक खाली फ़ाइल नाम भेजता है। समाधान: कॉल को सेट टाइमआउट में एक फ़ंक्शन में लपेटें। यह विधि सभी परीक्षण किए गए ब्राउज़रों में सही ढंग से काम करती है।

यह नाक पर खुद को हैक करने के लिए रहता है: संगतता मोड में IE 7 और IE 8 पूरी तरह से अलग ब्राउज़र हैं ...

अगला बहुत ही रोचक बग ओपेरा 11 में था, जिसमें केवल 3 उपयोगकर्ता थे। शायद यह स्वयं ओपेरा नहीं था जिसे दोष देना था, लेकिन किसी प्रकार का सहायक सॉफ्टवेयर। तथ्य यह है कि आपको सर्वर से जेएसएन प्रतिक्रिया को माइम टाइप टेक्स्ट / एचटीएमएल के साथ संचारित करना है, न कि एप्लिकेशन / जसन। जब आइफ्रेम में टाइप एप्लिकेशन / जोंस के साथ डेटा खोलने की कोशिश की जाती है, तो कुछ ब्राउज़रों ने उपयोगकर्ता को बाइनरी फ़ाइल डाउनलोड करने का सुझाव दिया, जबकि इसे चुपचाप जावास्क्रिप्ट में संसाधित किया जाना चाहिए।

ओपेरा देखता है कि देशी एचटीएमएल को प्रेषित किया जा रहा है, क्यों न वहां बैनर लगाया जाए? और चमक गया। स्वाभाविक रूप से, इस तरह के तार को पचाने की कोशिश करते समय पार्सर ढह गया। समाधान: सबसे पहले, यह पाठ / सादे का उपयोग करने के लिए वांछनीय है, और दूसरी बात, लाइन ट्रिमिंग को खोलने और समापन घुंघराले ब्रेसिज़ की पहली घटना के अनुसार जोड़ा गया था।

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

सबसे बुरी बात यह है कि इस बग को दोहराना संभव नहीं था - यहां तक ​​कि टीम की मशीनों पर IE ने भी अच्छा काम किया। एक परीक्षण पृष्ठ बनाया गया था, जिस पर फ्रेम को प्रदर्शित / छिपाने के विभिन्न तरीकों का उपयोग किया गया था। जैसा कि अपेक्षित था, दृश्यमान फ्रेम ने सही तरीके से काम किया, छिपे हुए फ्रेम ने टैब बनाए। समाधान सरल था - आपको एक अदृश्य div (प्रदर्शन: कोई नहीं) में प्रदर्शित फ्रेम को फ़्रेम करने की आवश्यकता है।

मैं आपको उन चकाचौंधों के बारे में भी बताऊंगा, जिन्हें हम पटकथा लिखने के चरण में पकड़ने में कामयाब रहे थे।

अलग-अलग, मुझे क्रॉपर (छवि के एक विशिष्ट क्षेत्र को चुनने के लिए फ्रेम) के साथ विकृतियों से निपटना पड़ा। यह स्क्रिप्ट सिर्फ थर्ड-पार्टी थी। स्थिर छवि के साथ, सब कुछ एक धमाके के साथ काम किया। लेकिन जैसे ही छवि बनाई गई गतिशील रूप से विभिन्न glitches बाहर चढ़ गए - गलत आकारों से पूरा छायांकन करने के लिए। डिलीट / न्यू के जरिए ऑब्जेक्ट को री-क्रिएट करने से मदद नहीं मिली। परीक्षण और त्रुटि से, यह पता चला कि छवि पूरी तरह से लोड होने के बाद स्क्रिप्ट को आरंभ करना चाहिए। और मापदंडों को फिर से पढ़ने के लिए एक रीसेट विधि है। एकमात्र तरीका, और कोई अन्य तरीका नहीं!

सबसे अप्रिय समस्याओं में से एक यह था कि सर्वर को इंटरसेक्टिंग फॉर्म भेजना (उदाहरण के लिए, फॉर्म में एक फॉर्म) हमेशा सही ढंग से काम नहीं करता है। और फ़ाइल इनपुट एक फार्म तत्व है। पहला समाधान जो दिमाग में आता है वह है इनपुट से डेटा कॉपी करना और उसी तरह का DOM ट्री बनाना। लेकिन यह सभी ब्राउज़रों द्वारा समर्थित नहीं है। DOM ट्री पर इनपुट ट्रांसफ़र करना भी विफल रहा। लेकिन अगर आप इसे एक डीआईवी में फ्रेम करते हैं, तो आप इसे फार्म तत्व के साथ, चुपचाप स्थानांतरित कर सकते हैं।

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

अंत में, मैं कहूंगा कि हमें अपने दम पर स्क्रिप्ट विकसित करने के निर्णय पर पछतावा नहीं हुआ। व्यक्तिगत रूप से, मुझे कीड़े पकड़ने, कभी-कभी हिस्टीरिया और खूनी आँसू के लिए मज़ेदार अनुभव और मज़ेदार क्षण मिले। लेकिन परिणाम ठीक वही है जो आपको चाहिए।