एचटीएमएल 5 - क्रॉस ब्राउज़र Iframe PostMessage - माता-पिता बच्चे को संचार

Question

को मैं एक सामग्री स्क्रिप्ट है कि किसी भी वेबसाइट (इसलिए अलग डोमेन) के लिए एक iframe injects लिखा था।

मुझे माता-पिता वेबसाइट को कुछ जानकारी भेजने के लिए मूल वेबसाइट की आवश्यकता है, हालांकि मुझे ऐसा करने का कोई तरीका नहीं मिला।

कोड

var targetFrame = $('#myIframe')[0]; 
targetFrame.contentWindow.postMessage('the message', '*'); 

किसी भी तरह काम नहीं करता और मैं एक Cannot call method 'postMessage' of undefined त्रुटि मिलती है। लेकिन तब जब मैं Chrome की कंसोल में सीधे एक ही कोड की कोशिश की, यह काम किया।

मुझे बच्चे से अभिभावक को पोस्ट भेजने में कोई परेशानी नहीं थी, लेकिन माता-पिता को बच्चे आईफ्रेम को संदेश भेजने की आवश्यकता है।

Answer 1

मैं निम्नलिखित लाइब्रेरी का उपयोग कर सफलता मिली है:

http://easyxdm.net/wp/

यह किसी भी फ्लैश/Silverlight, केवल जावास्क्रिप्ट की आवश्यकता नहीं है। और यह वापस दूर IE6 के रूप में के रूप में के रूप में संगत है।

यह थोड़ा कर यह बनाने और चलाने के लिए ले लिया है, लेकिन एक बार यह था बातें बहुत आसानी से भाग गया।

ध्यान रखें कि यदि आप अन्य डोमेन पर खोल रहे आईफ्रेम को एक अलग प्रोटोकॉल (HTTP बनाम HTTPS) का उपयोग करता है, तो ब्राउज़र एक चेतावनी निकाल देगा जो आपकी स्क्रिप्ट को चलने से रोकता है (जब तक कि उपयोगकर्ता कहता है कि वे स्वीकार करेंगे जोखिम)। आप दोनों प्रोटोकॉल की पहुंच है अगर यह दोनों HTTP पर iFrame की सामग्री को होस्ट करने के लिए बुद्धिमान हो सकता है और HTTPS और तदनुसार उपयुक्त स्क्रिप्ट लोड कर सकते हैं।

गुड लक!

Answer 2

आप contentWindow लक्षित करने के लिए जरूरत नहीं है। इस प्रयास करें:

var targetFrame = $('#myIframe')[0]; 
targetFrame.postMessage('the message', '*'); 

Answer 3

मैं हाल ही में कोड है कि एक iframe करने के लिए postMessage किया लिखा था और मैं काफी ने वही समस्या है, जहां यह कहा contentWindowundefined है का सामना करना पड़ा।

मेरे मामले में, मेरे iframe अभी तक डोम पेड़ का हिस्सा नहीं था, यह document.createElement('iframe') द्वारा निर्मित एक चर था।

एक बार जब मैं इसे पृष्ठ के शरीर में छिपा हुआ (चौड़ाई और ऊंचाई 0 पीएक्स, दृश्यता छिपी हुई) डालता हूं, contentWindow अब अपरिभाषित नहीं था और सब कुछ अपेक्षित के रूप में काम करता था।

मुझे पृष्ठ postMessage पृष्ठ पर मिला जब मैं अपनी परियोजना पर काम कर रहा था।