आप डोमेन में window.postMessage का उपयोग कैसे करते हैं?


88

ऐसा लगता है कि window.postMessage के बिंदु विभिन्न डोमेन पर होस्ट किए गए विंडोज़ / फ़्रेम के बीच सुरक्षित संचार की अनुमति देने के लिए है, लेकिन यह वास्तव में क्रोम में अनुमति नहीं देता है।

यहाँ परिदृश्य है:

  1. डोमेन ए पर एक पृष्ठ में एक <iframe> ( srcडोमेन बी * के साथ ) एम्बेड करें
  2. <Iframe> का अंत अधिकतर <script> टैग होता है, जिसके अंत में निष्पादन होता है ...
  3. मैं window.postMessage ( some_data , page_on_A ) कहता हूं

डोमेन बी के संदर्भ में <iframe> सबसे निश्चित रूप से है, और मैंने पुष्टि की है कि उस में एम्बेडेड जावास्क्रिप्ट <<iframe> ठीक से निष्पादित होता है और postMessageसही मानों के साथ कॉल करता है ।

मुझे क्रोम में यह त्रुटि संदेश मिला:

A को संदेश पोस्ट करने में असमर्थ । प्राप्तकर्ता मूल B है

यहाँ वह कोड है जो A पर पेज में एक संदेश ईवेंट श्रोता को पंजीकृत करता है:

window.addEventListener(
  "message",
  function (event) {
    // Do something
  },
  false);

मैंने कॉल करने की भी कोशिश की है window.postMessage(some_data, '*'), लेकिन यह सब त्रुटि को दबा देता है।

क्या मैं सिर्फ इस बिंदु को याद कर रहा हूं, क्या window.postMessage (...) इसके लिए नहीं है? या मैं सिर्फ यह बहुत गलत कर रहा हूँ?

* माइम-टाइप टेक्स्ट / html, जो उसे रहना चाहिए।


1
आप शायद इस बारे में पहले से ही अवगत हैं, लेकिन MDC का पोस्टमेज पर एक उत्कृष्ट रंडाउन है: डेवलपर. mozilla.org/en/DOM/window.postMessage एफएफ कार्यान्वयन के लिए स्पष्ट रूप से, लेकिन शायद वहाँ कुछ ऐसा है जो बताता है कि यह काम नहीं करता है।
पेक्का

जवाबों:


79

यहां एक उदाहरण दिया गया है जो क्रोम 5.0.375.125 पर काम करता है।

पृष्ठ B (iframe सामग्री):

<html>
    <head></head>
    <body>
        <script>
            top.postMessage('hello', 'A');
        </script>
    </body>
</html>

यहां top.postMessageया parent.postMessageनहीं के उपयोग पर ध्यान देंwindow.postMessage

पृष्ठ A:

<html>
<head></head>
<body>
    <iframe src="B"></iframe>
    <script>
        window.addEventListener( "message",
          function (e) {
                if(e.origin !== 'B'){ return; } 
                alert(e.data);
          },
          false);
    </script>
</body>
</html>

A और B कुछ ऐसा होना चाहिए http://domain.com

संपादित करें:

एक अन्य प्रश्न से , ऐसा लगता है कि डोमेन (ए और बी यहां) ठीक से काम करने के /लिए होना चाहिए postMessage


3
जब पृष्ठ A संदेश की उत्पत्ति की जाँच करता है, तो मूल में अनुगामी '/' नहीं होगा। इससे कोई फर्क नहीं पड़ता कि पेज B एक अनुगामी '/' निर्दिष्ट करता है या नहीं। दूसरी बात ध्यान देने योग्य यह है कि URL निरपेक्ष URL होने चाहिए।
कैच

1
इस जवाब ने मुझे थोड़ा भ्रमित कर दिया और अभी भी एक उत्तर की तलाश है। blog.teamtreehouse.com/cross-domain-messaging-with-postmessage में पोस्टमैसेज की बहुत अच्छी व्याख्या है। क्या महत्वपूर्ण है कि संदेश भेजने वाला रिसीवर के डोमेन को जानता है। ऊपर दिए गए उदाहरण में, A और B को एक ही डोमेन नहीं होना है, लेकिन B को यह अवश्य पता होना चाहिए कि किस डोमेन का उपयोग A.
ग्रेग बोगुमिल

7
सवाल क्रॉस-डोमेन के बारे में है। स्वीकृत उत्तर उसी डोमेन के बारे में है।
स्टैक्युलर

@ स्टैक्यूलर, बिल्कुल नहीं। A और B कोई भी डोमेन हो सकता है। यह होने का मुख्य कारण हैpostMessage
माइक

1
+1। हम पुष्टि करना चाहते हैं कि इस समाधान ने हमारे मामले पर काम किया। हमारे पास एक पृष्ठ है जिसमें विभिन्न डोमेन से एक iframe शामिल है । कृपया ध्यान दें कि यह केवल क्रोम ब्राउज़र में काम करता है, क्योंकि फ़ायरफ़ॉक्स में हमें शीर्ष के बजाय window.parent.postMessage का उपयोग करने की आवश्यकता होती है । हालांकि हमें नहीं पता कि यह किसी अन्य ब्राउज़र पर लागू किया जा सकता है या नहीं।
19 को रहमतों

24

आपको लोड होने के बाद, फ़्रेम से माता-पिता तक एक संदेश पोस्ट करना चाहिए।

फ्रेम स्क्रिप्ट:

$(document).ready(function() {
    window.parent.postMessage("I'm loaded", "*");
});

और इसे माता-पिता में सुनो:

function listenMessage(msg) {
    alert(msg);
}

if (window.addEventListener) {
    window.addEventListener("message", listenMessage, false);
} else {
    window.attachEvent("onmessage", listenMessage);
}

अधिक जानकारी के लिए इस लिंक का उपयोग करें: http://en.wikipedia.org/wiki/Web_Messaging


2

संभवतः आप अपना डेटा mydomain.com से www.mydomain.com या रिवर्स पर भेजने का प्रयास करते हैं, ध्यान दें कि आप "www" से चूक गए हैं। http://mydomain.com और http://www.mydomain.com जावास्क्रिप्ट के लिए अलग-अलग डोमेन हैं।


2
मेरे द्वारा किए जा रहे प्रोजेक्ट में, मैं file:/// स्थानीय फ़ाइल सिस्टम से सामग्री को पूरी तरह से खींचते समय क्या डोमेन त्रुटियों को प्राप्त करना संभव है?
जैक्सनक्र
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.