मैं एक तुच्छ postMessageउदाहरण काम करने की कोशिश कर रहा हूँ ...

IE10 में
खिड़कियों के बीच / टैब (बनाम iframes)
मूल के पार

इन स्थितियों में से किसी एक को निकालें, और चीजें ठीक काम करती हैं :-)

लेकिन जहां तक मैं बता सकता हूं, बीच-विंडो postMessageकेवल IE10 में काम करने के लिए प्रकट होती है जब दोनों विंडोज़ एक मूल साझा करते हैं। (ठीक है, वास्तव में - और अजीब तरह से - व्यवहार उस से थोड़ा अधिक अनुज्ञेय है: दो अलग-अलग मूल जो एक मेजबान को साझा करते हैं, काम भी लगते हैं)।

क्या यह एक दस्तावेज बग है? कोई वर्कअराउंड या अन्य सलाह?

(नोट: यह प्रश्न मुद्दों पर छूता है, लेकिन इसका उत्तर IE8 और IE9 के बारे में है - 10 नहीं)

अधिक विवरण + उदाहरण ...

लॉन्चर पेज डेमो

<!DOCTYPE html>
<html>
  <script>
    window.addEventListener("message", function(e){
      console.log("Received message: ", e);
    }, false);
  </script>
  <button onclick="window.open('http://jsbin.com/ameguj/1');">
    Open new window
  </button>
</html>

पृष्ठ का डेमो शुरू किया

<!DOCTYPE html>
<html>
  <script>
    window.opener.postMessage("Ahoy!", "*");
  </script>
</html>

यह काम करता है: http://jsbin.com/ahuzir/1 - क्योंकि दोनों पृष्ठ एक ही मूल (jsbin.com) पर होस्ट किए गए हैं। लेकिन दूसरे पृष्ठ को कहीं और ले जाएं, और यह IE10 में विफल रहता है।

— बकवास
स्रोत

1

blogs.msdn.com/b/ieinternals/archive/2009/09/16/…

— एरिकला

5

कृपया मानने वाले उत्तर को बदलने के बारे में विचार करें जो उस प्रश्न का उत्तर देता है, जो मैसेजचैनल को आपकी सबसे अच्छी शर्त के रूप में सूचीबद्ध करता है, जब मैसेजचैन को पोस्टमैसेज की आवश्यकता होती है ताकि वह इसे काम कर सके। मैंने केवल मैसेजचैनल के साथ खेलते हुए एक घंटे से अधिक समय बिताया है कि एक व्यवहार्य समाधान एक आइफ्रेम प्रॉक्सी है।

— एरिकोस

1

यदि आपका window.open सिर्फ एक पॉपअप डायलॉग है, तो आप इसे पूरी तरह से टाल सकते हैं और js मोडल में एक iframe का उपयोग कर सकते हैं। JQuery के डायलॉग या बूटस्ट्रैप मोडल जैसा कुछ है कि मैंने इसे कैसे लागू किया। तो आप window.parent.postMessageIE में उपयोग कर सकते हैं ।

— स्टाइल जूल

@Bosh के रूप में मेरा उत्तर 2018 में काम करने के लिए लगता है और किसी भी प्रॉक्सी फ्रेम की आवश्यकता नहीं है, क्या आप किसी को स्वीकार किए गए उत्तर के रूप में स्थापित करने में मन लगाएंगे क्योंकि यह हमें मदद करने के लिए लगता है, दुर्भाग्यपूर्ण है जो अभी भी पुराने का समर्थन करना चाहते हैं

— ब्रूनो लॉरिएक

62

जब मुझे मूल रूप से यह उत्तर पोस्ट किया गया था, तो मुझसे गलती हुई थी: यह वास्तव में IE10 में काम नहीं करता है। जाहिरा तौर पर लोगों ने अन्य कारणों से इसे उपयोगी पाया है इसलिए मैं इसे पोस्टीरिटी के लिए छोड़ रहा हूं। नीचे मूल उत्तर:

वर्थ नोटिंग: उस उत्तर में लिंक जो आप उन राज्यों से जुड़ा है जो postMessageIE8 और IE9 में अलग-अलग विंडो के लिए क्रॉस ओरिजिनल नहीं है - हालांकि, IE10 के आसपास आने से पहले यह 2009 में भी लिखा गया था। इसलिए मैं इसे IE10 में तय किए गए संकेत के रूप में नहीं ले जाऊंगा।

के रूप में postMessageही है, http://caniuse.com/#feat=x-doc-messaging विशेष रूप से इंगित करता है कि यह अभी भी IE10, जो आपके डेमो के साथ मेल करने लगता है में टूट गया है। इस लेख के लिए caniuse पेज लिंक है , जिसमें एक बहुत ही प्रासंगिक उद्धरण है:

इंटरनेट एक्सप्लोरर 8+ आंशिक रूप से क्रॉस-डॉक्यूमेंट मैसेजिंग का समर्थन करता है: यह वर्तमान में आइफ्रेम के साथ काम करता है, लेकिन नई विंडो नहीं। इंटरनेट एक्सप्लोरर 10, मैसेजचैनल का समर्थन करेगा। फ़ायरफ़ॉक्स वर्तमान में क्रॉस-दस्तावेज़ मैसेजिंग का समर्थन करता है, लेकिन MessageChannel का नहीं।

तो आपका सबसे अच्छा शर्त शायद एक MessageChannelआधारित कोडपथ है, और postMessageअगर वह मौजूद नहीं है तो कमबैक करना होगा। यह आपको IE8 / IE9 समर्थन नहीं मिलेगा, लेकिन कम से कम यह IE10 के साथ काम करेगा।

डॉक्स MessageChannel: http://msdn.microsoft.com/en-us/library/windows/apps/hh441303/x

— shz
स्रोत

8

आप एक- MessageChannelआधारित कोडपाथ कैसे बनाएंगे जो काम करे? postMessageचैनल के पोर्ट को अन्य विंडो पर लाने के लिए आपको अभी भी कार्यप्रणाली की आवश्यकता है ।

— बाल्फा

1

postMessageनए MessageChannelAPI के साथ प्रयोग करने से नई विंडो और ऑरिजन्स काम करेंगे। काम मुझे लगता है कि थोड़ा अजीब है, लेकिन मूल रूप से: postMessage('foo', '*')बुरा है, postMessage('foo', [messageChannel.port2])अच्छा है।

— ShZ

3

मैं मेरे जीवन के लिए IE (11) और MessageChannel एपीआई के नवीनतम संस्करण का उपयोग करके क्रॉस-डोमेन पॉपअप विंडो के साथ काम करने के लिए पोस्टमैसेज नहीं पा सकता हूं। और ईमानदारी से मैं इस जवाब के अलावा इंटरव्यू पर कहीं और नहीं मिल सकता है जो यह बताता है कि इस विशिष्ट परिदृश्य को काम करना चाहिए। क्या कोई उदाहरण से साबित कर सकता है कि यह काम करता है? मैं हमेशा आभारी रहूंगा।

— टोड मेनियर

4

MessageChannel एक ही कारण के लिए काम नहीं करना चाहिए पोस्टमैसेज नहीं होगा। Microsoft को क्रॉस-प्रोसेस मार्शेलिंग को ठीक करने की आवश्यकता है। blogs.msdn.com/b/ieinternals/archive/2009/09/15/…

— EricLaw

9

यह उत्तर कष्टप्रद है क्योंकि यह हमें झूठी आशा देता है। इसका उत्तर है: यह प्रॉक्सी के बिना काम नहीं करेगा क्योंकि संदेश भेजने के लिए PostMessage को काम करने की आवश्यकता होती है (कम से कम प्रत्येक डेमो में जो मैंने देखा है)। जब तक कोई मुझे PostMessage या PostMessage ('नाम', '<डोमेन>', [messageChannel.port2]) के बिना काम करने का एक डेमो दिखाता है, क्रॉस डोमेन (मैं इसे काम नहीं कर सकता), मुझे इस पर विश्वास नहीं होगा प्रॉक्सी फ्रेम के बिना काम करता है।

— अक्रिकोस

30

लॉन्चर के समान होस्ट पर एक प्रॉक्सी पृष्ठ बनाएं। प्रॉक्सी पृष्ठ में iframeदूरस्थ पृष्ठ पर सेट स्रोत के साथ है। क्रॉस-ऑरिजनल पोस्टमैसेज अब IE10 में काम करेगा जैसे:

दूरस्थ पृष्ठ window.parent.postMessageप्रॉक्सी पृष्ठ पर डेटा पास करने के लिए उपयोग करता है। के रूप में यह iframes का उपयोग करता है, यह IE10 द्वारा समर्थित है
प्रॉक्सी पृष्ठ window.opener.postMessageलॉन्चर पृष्ठ पर डेटा वापस भेजने के लिए उपयोग करता है। जैसा कि यह एक ही डोमेन पर है - कोई क्रॉस-ऑरिजनल समस्याएं नहीं हैं। यदि आप पोस्टमैसेज का उपयोग नहीं करना चाहते हैं, तो यह सीधे लॉन्चर पेज पर वैश्विक तरीकों को भी कॉल कर सकता है।window.opener.someMethod(data)

नमूना (सभी URL काल्पनिक हैं)

लॉन्चर पेज पर http://example.com/launcher.htm

<!DOCTYPE html>
<html>
    <head>
        <title>Test launcher page</title>
        <link rel="stylesheet" href="/css/style.css" />
    </head>
    <body>

    <script>
        function log(msg) {
            if (!msg) return;

            var logger = document.getElementById('logger');
            logger.value += msg + '\r\n';
        }            

        function toJson(obj) {
            return JSON.stringify(obj, null, 2);
        }

        function openProxy() {
            var url = 'proxy.htm';
            window.open(url, 'wdwProxy', 'location=no');
            log('Open proxy: ' + url);
        }

        window.addEventListener('message', function(e) {
            log('Received message: ' + toJson(e.data));
        }, false);
    </script>
    
    <button onclick="openProxy();">Open remote</button> <br/>
    <textarea cols="150" rows="20" id="logger"></textarea>

    </body>
</html>

प्रॉक्सी पेज पर http://example.com/proxy.htm

<!DOCTYPE html>
<html>
    <head>
        <title>Proxy page</title>
        <link rel="stylesheet" href="/css/style.css" />
    </head>
    <body>

    <script>
        function toJson(obj) {
            return JSON.stringify(obj, null, 2);
        }

        window.addEventListener('message', function(e) {
            console.log('Received message: ' + toJson(e.data));

            window.opener.postMessage(e.data, '*');
            window.close(self);
        }, false);
    </script>

    <iframe src="http://example.net/remote.htm" frameborder="0" height="300" width="500" marginheight="0" marginwidth="0" scrolling="auto"></iframe>

    </body>
</html>

दूरस्थ पृष्ठ पर http://example.net/remote.htm

<!DOCTYPE html>
<html>
    <head>
        <title>Remote page</title>
        <link rel="stylesheet" href="/css/style.css" />
    </head>
    <body>

    <script>
        function remoteSubmit() {
            var data = {
                message: document.getElementById('msg').value
            };

            window.parent.postMessage(data, '*');
        }
    </script>
    
    <h2>Remote page</h2>

    <input type="text" id="msg" placeholder="Type a message" /><button onclick="remoteSubmit();">Close</button>

    </body>
</html>

— LyphTEC
स्रोत

आपका उत्तर बेहतर होगा यदि इसमें अन्य उदाहरणों में लिंक किए गए Microsoft उदाहरण पृष्ठ और वर्कअराउंड पृष्ठ का लिंक शामिल हो। वर्कअराउंड: blogs.msdn.com/b/ieinternals/archive/2009/09/16/… उदाहरण (वर्कअराउंड पेज से): debugtheweb.com/test/xdm/origin

— Akrikos

इसके अलावा, आपका उदाहरण पृष्ठ अब एक गोडैडी पृष्ठ से लिंक नहीं मिला है।

— २०:

8

है ना? ... सभी URL EXAMPLES हैं और वास्तव में मौजूदा पृष्ठों की ओर इशारा नहीं करते हैं ... सूचीबद्ध स्रोत से आप यह निर्धारित कर सकते हैं कि इसे काम करने के लिए क्या करना होगा ..

— Lyphtec

स्पष्टीकरण के लिए धन्यवाद। :-)

— अक्रिकोस

29

== iframe के बिना 2020 में काम कर रहे समाधान ==

उलझन से जवाब देने पर, मुझे IE11 में सफलता मिली [और IE10 मोड का अनुकरण किया] निम्नलिखित स्निपेट का उपयोग करते हुए:

var submitWindow = window.open("/", "processingWindow");
submitWindow.location.href = 'about:blank';
submitWindow.location.href = 'remotePage to comunicate with';

तब मैं विशिष्ट पोस्टमैसेज स्टैक का उपयोग करके संवाद करने में सक्षम था, मैं अपने परिदृश्य में एक वैश्विक स्टेटिक मैसेंजर का उपयोग कर रहा हूं (हालांकि मैं किसी भी संकेत के बारे में नहीं सोचता, मैं अपने मैसेंजर क्लास को भी संलग्न कर रहा हूं)

var messagingProvider = {
    _initialized: false,
    _currentHandler: null,

    _init: function () {
        var self = this;
        this._initialized = true;
        var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
        var eventer = window[eventMethod];
        var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

        eventer(messageEvent, function (e) {
            var callback = self._currentHandler;
            if (callback != null) {
                var key = e.message ? "message" : "data";
                var data = e[key];
                callback(data);
            }
        }, false);
    },

    post: function (target, message) {
        target.postMessage(message, '*');
    },

    setListener: function (callback) {
        if (!this._initialized) {
            this._init();
        }

        this._currentHandler = callback;
    }
}

कोई फर्क नहीं पड़ता कि मैंने कितनी कोशिश की, मैं IE9 और IE8 पर काम करने में सक्षम नहीं था

मेरा
कॉन्फिगरेशन जहाँ यह काम कर रहा है: IE संस्करण: 11.0.10240.16590, अपडेट संस्करण: 11.0.25 (KB3100773)

— ब्रूनो लॉरिनेक
स्रोत

6

मुझे सिर्फ इतना कहना है - अगर कोई और इस सोच को देख रहा है "कोई रास्ता नहीं है, तो संभवतः इसे ठीक नहीं कर सकता" - हाँ, यह वास्तव में IE11 में window.opener को पोस्टमासेज करने में असमर्थता को निर्धारित करता है। अविश्वसनीय।

— dkr88

1

कोई रास्ता नहीं ... मैं 2 दिनों की कोशिश कर रहा था और इस समस्या का "हल"

— lmiguelmh

आकर्षण और रहस्यमय की तरह काम करता है !! (IE10.0.9200, win7)

— साइमन

क्या आप इस समाधान के लिए एक पूर्ण उदाहरण प्रदान कर सकते हैं?

— msm2020

1

@SidJonnala वास्तव में नहीं, लेकिन मैं यही सलाह दूंगा। यदि आप तुरंत वास्तविक दूरस्थ पृष्ठ पर पुन: असाइन करते हैं और आपका पृष्ठ लोड करने के लिए 3-4s लेता है [समय-समय पर हो सकता है] तो आप जोखिम उठाते हैं कि आपका window.open ('/') पृष्ठ लोड होता है और उपयोगकर्ता को भ्रमित करता है

— ब्रूनो लॉरिनेक

2

LyphTEC और Akrikos के जवाबों के आधार पर, एक अन्य काम-के आसपास <iframe>एक खाली पॉपअप विंडो बनाने के लिए है, जो एक अलग प्रॉक्सी पृष्ठ की आवश्यकता से बचा जाता है, क्योंकि रिक्त पॉपअप की अपनी सलामी बल्लेबाज के समान मूल है।

लॉन्चर पेज पर http://example.com/launcher.htm

<html>
  <head>
    <title>postMessage launcher</title>
    <script>
      function openWnd() {
        var w = window.open("", "theWnd", "resizeable,status,width=400,height=300"),
            i = w.document.createElement("iframe");

        i.src = "http://example.net/remote.htm";
        w.document.body.appendChild(i);

        w.addEventListener("message", function (e) {
          console.log("message from " + e.origin + ": " + e.data);

          // Send a message back to the source
          e.source.postMessage("reply", e.origin);
        });
      }
    </script>
  </head>
  <body>
    <h2>postMessage launcher</h2>
    <p><a href="javascript:openWnd();">click me</a></p>
  </body>
</html>

दूरस्थ पृष्ठ पर http://example.net/remote.htm

<html>
  <head>
    <title>postMessage remote</title>
    <script>
      window.addEventListener("message", function (e) {
        alert("message from " + e.origin + ": " + e.data);
      });

      // Send a message to the parent window every 5 seconds
      setInterval(function () {
        window.parent.postMessage("hello", "*");
      }, 5000);
    </script>
  </head>
  <body>
    <h2>postMessage remote</h2>
  </body>
</html>

मुझे यकीन नहीं है कि यह कितना नाजुक है, लेकिन यह IE 11 और फ़ायरफ़ॉक्स 40.0.3 में काम कर रहा है।

— उलझन
स्रोत

1

... और अब यह <iframe>IE 11 ( 11.0.9600.18036, अद्यतन संस्करणों 11.0.23 (KB3087038)) में काम नहीं करता है ( दिशा में पॉपअप विंडो में मौन विफलता )। संभवतः हालिया सुरक्षा अद्यतन ( KB3087038 ) को फंसाया गया है।

— उलझन

1

अभी, (2014-09-02), आपका सबसे अच्छा शर्त एक प्रॉक्सी फ्रेम का उपयोग करना है जैसा कि एमएसडीएन ब्लॉग पोस्ट में नोट किया गया है जो इस मुद्दे के लिए एक समाधान का विवरण देता है: https://blogs.msdn.microsoft.com/ieinternalssel / 09/15 / एचटीएमएल 5-कार्यान्वयन मुद्दों में IE8 और बाद में /

यहाँ काम कर उदाहरण है: http://www.debugtheweb.com/test/xdm/origin/

आपको अपने पृष्ठ पर एक प्रॉक्सी फ्रेम सेट करने की आवश्यकता है जिसमें पॉपअप के समान मूल है। पॉपअप से प्रॉक्सी फ्रेम का उपयोग करके जानकारी भेजें window.opener.frames[0]। फिर प्रॉक्सी फ्रेम से मुख्य पृष्ठ तक पोस्टमासेज का उपयोग करें।

— Akrikos
स्रोत

1

इस समाधान में इंटरनेट एक्सप्लोर साइट पर साइट को जोड़ना और स्थानीय इंट्रानेट साइटों में शामिल नहीं है। मैंने विंडोज 10 / IE 11.0.10240.16384, विंडोज 10 / माइक्रोसॉफ्ट एज 20.10240.16384.0 और विंडोज 7 SP1 / IE 10.0.9200.17148 में इस समाधान का परीक्षण किया। पेज इंट्रानेट ज़ोन में शामिल नहीं होना चाहिए ।

इसलिए इंटरनेट एक्सप्लोरर कॉन्फ़िगरेशन (उपकरण> इंटरनेट विकल्प> सुरक्षा> विश्वसनीय साइटें> साइटें) खोलें, और पृष्ठ जोड़ें, यहां मैं सभी उप-डोमेन से मिलान करने के लिए * का उपयोग करता हूं। सुनिश्चित करें कि पृष्ठ स्थानीय इंट्रानेट साइटों (उपकरण> इंटरनेट विकल्प> सुरक्षा> स्थानीय इंट्रानेट> साइट> उन्नत) में सूचीबद्ध नहीं है । अपने ब्राउज़र को पुनरारंभ करें और फिर से परीक्षण करें।

में Windows 10 / माइक्रोसॉफ्ट एज आप में नियंत्रण कक्ष> इंटरनेट विकल्प इस विन्यास मिल जाएगा।

अपडेट करें

यदि यह काम नहीं करता है तो आप उपकरण> इंटरनेट विकल्प> उन्नत सेटिंग्स> इंटरनेट एक्सप्लोरर सेटिंग्स रीसेट करें और फिर रीसेट करें: इसे सावधानी से उपयोग करें ! फिर आपको अपने सिस्टम को रिबूट करने की आवश्यकता होगी। उसके बाद साइट्स को ट्रस्टेड साइट्स में जोड़ें।

देखें कि आपका पेज फ़ाइल> गुणों में किस क्षेत्र में है या राइट क्लिक का उपयोग कर रहा है।

अपडेट करें

मैं एक कॉर्पोरेट इंट्रानेट में हूं और कभी-कभी यह काम करता है और कभी-कभी ऐसा नहीं होता है (स्वचालित कॉन्फ़िगरेशन? मैंने भी कॉर्पोरेट प्रॉक्सी को दोष देना शुरू कर दिया है)। अंत में मैंने इस समाधान का उपयोग किया https://stackoverflow.com/a/36630058/2692914 ।

— lmiguelmh
स्रोत

0

यह Q पुराना है, लेकिन यह वही है जो easyXDM के लिए है, हो सकता है कि जब आप किसी ऐसे ब्राउजर का पता लगाएं, जो html5 को सपोर्ट नहीं करता हो तो संभावित कमबैक के रूप में इसे देखें।

https://easyxdm.net/

यह VBObject आवरण और उन सभी प्रकार के सामानों का उपयोग करता है जिन्हें आप कभी भी विंडोज़ या फ़्रेम के बीच क्रॉस डोमेन संदेशों को भेजने के लिए सौदा नहीं करना चाहते हैं जहाँ window.postMessage विभिन्न IE संस्करणों (और किनारे शायद) के लिए विफल रहता है, फिर भी समर्थन पर 100% सुनिश्चित नहीं है एज के पास है, लेकिन यह भी .postMessage के लिए एक समाधान की जरूरत है लगता है)

— ओ जी सीन
स्रोत

-3

MessageChannel IE / 9-11 के लिए विंडोज़ / टैब के बीच काम नहीं करता है क्योंकि यह पोस्टमैसेज पर निर्भर करता है, जो इस परिदृश्य में अभी भी टूटा हुआ है। "सर्वश्रेष्ठ" वर्कअराउंड एक फ़ंक्शन को window.opener (यानी। window.opener.somefunction ("somedata") के माध्यम से कॉल करना है।

यहां अधिक विवरण में समाधान

— user1337489
स्रोत

1

यह क्रॉस ओरिजिन सेटिंग्स में काम नहीं करता है, जो प्रश्न में किसी और चीज में से एक है।

— PhistucK

IE10 में क्रॉस-ऑरिजनल पोस्टमेसेज टूट गया है?

क्या यह एक दस्तावेज बग है? कोई वर्कअराउंड या अन्य सलाह?

लॉन्चर पेज डेमो

पृष्ठ का डेमो शुरू किया

नमूना (सभी URL काल्पनिक हैं)