प्रतिक्रिया.जेएस

Question

के साथ चैट विजेट मैं एक चैट विजेट लिख रहा हूं, जिसे अंतिम वेबसाइट पर वितरित किया जाएगा, जिसमें उनकी वेबसाइट में डालने के लिए छोटे कोड होंगे। सामान्य दिनचर्या

मेरा विजेट प्रतिक्रिया में लिखा जा रहा है। मैं इसे हासिल करने के कई तरीके जानता हूं। मुझे उन तरीकों की सूची दें जिनके बारे में मैं सोच सकता हूं।

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

बेशक, स्रोत यूआरएल एक प्रतिक्रिया पृष्ठ प्रस्तुत करेगा जो किसी भी मामले में वेबपैक द्वारा बंडल किया गया है।

मैं एक विजेट विकसित करने के सर्वोत्तम प्रथाओं को जानना चाहता था। तो मैं इसके लोकप्रिय कार्यान्वयन के माध्यम से चला गया। मुझे Intercom का विजेट बहुत पसंद आया। यह प्रतिक्रिया में लिखा गया है। मैंने विश्लेषण किया कि यह कैसे काम करता है। न्यूनतम javascript वेबपृष्ठ पर async लोड किया गया है। यह आईडी intercom-frame आईडी के साथ iframe इंजेक्शन दे रहा है। iframe के स्रोत में URl स्रोत के साथ एक स्क्रिप्ट है। जाहिर है यह प्रतिक्रिया बंडल है।

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

मैं इस SO question पर आया, जो आंशिक रूप से मेरे प्रश्न का उत्तर देता है। उत्तर से,

विंडो मैसेजिंग का उपयोग करके अपने ग्राहक वेबपृष्ठ और आपके आईफ्रेम के बीच कुछ एपीआई का पर्दाफाश करें।

मुख्य कोड (iframe कोड) तब इस पहली स्क्रिप्ट द्वारा असीमित रूप से लोड किया जाता है, और इसमें शामिल नहीं है।

क्या मुझे समझ नहीं आता है,

1.) कैसे वे विंडो संदेश के साथ इसे हासिल किया होगा?

2.) iframe एस के साथ iframe एस के साथ div बनाने में कैसे कामयाब रहेगा? विजेट जावास्क्रिप्ट उन स्रोतों को नहीं बना रहा है, जो इसके स्रोत के आधार पर हैं। यह विजेट जेएस द्वारा उत्पन्न आईफ्रेम में रिएक्ट बंडल द्वारा किया जाना चाहिए था।

3.) iframe के अंदर एक प्रतिक्रिया बंडल कैसे माता-पिता DOM में प्रतिक्रिया तत्व बना सकता है?

Answer 1

इंटरकॉम की लिपि द्वारा बनाए गए iframe में से कोई भी src विशेषता है, जिसका अर्थ है कि वे एक ही मूल नीति के अधीन नहीं हैं। इसलिए, वे पैरेंट पेज एचटीएमएल और इसके विपरीत संशोधित कर सकते हैं।

हालांकि, मुझे समझ में नहीं आता कि उन्हें iframe अलग क्यों होना चाहिए। और एक और स्क्रिप्ट इंजेक्ट करने के लिए एक स्क्रिप्ट का उपयोग क्यों करें जो मुख्य HTML सामग्री को इंजेक्ट करता है। क्या पहली स्क्रिप्ट में HTML सामग्री इंजेक्ट करने की पर्याप्त क्षमता नहीं है? मुझे इन चीजों के बारे में हल्का होना अच्छा लगेगा।