আইস 10 এ ক্রস-অরিজিন পোস্টম্যাসেজটি কি ভাঙা আছে?

Question 1

আমি একটি তুচ্ছ postMessageউদাহরণ কাজ করার চেষ্টা করছি ...

আইই 10 এ
উইন্ডোজ / ট্যাবগুলির মধ্যে (বনাম iframes)
উত্স জুড়ে

এই শর্তগুলির যে কোনও একটি সরান, এবং জিনিসগুলি ভাল কাজ করে :-)

তবে যতদূর আমি বলতে পারি, postMessageউভয় উইন্ডোতে একটি উত্স ভাগ করে নেওয়ার সময় উইন্ডোটি কেবল আই 10 তে কাজ করে। (আচ্ছা, বাস্তবে - এবং অদ্ভুতভাবে - আচরণটি তার চেয়ে কিছুটা বেশি অনুমোদনযোগ্য: হোস্টকে ভাগ করে নেওয়ার দুটি পৃথক উত্সও কাজ করে বলে মনে হয়)।

এটি কি নথিভুক্ত বাগ? কোন workaround বা অন্য পরামর্শ?

(দ্রষ্টব্য: এই প্রশ্নটি বিষয়গুলিকে স্পর্শ করে তবে এর উত্তর আইই 8 এবং আইই 9 - 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 এ ব্যর্থ।

Question 2

আমি এই উত্তরটি মূলত পোস্ট করার সময় আমার ভুল হয়েছিল: এটি আসলে আই 10 তে কাজ করে না। স্পষ্টতই লোকেরা অন্যান্য কারণে এই দরকারী পেয়েছে তাই আমি এটি উত্তরোত্তর রেখে চলেছি leaving নীচে মূল উত্তর:

লক্ষ্যণীয়: এই জবাবটির যে লিঙ্কটি আপনি রাজ্যগুলির সাথে সংযুক্ত করেছেন যেগুলি postMessageআইই 8 এবং আই 9-তে পৃথক উইন্ডোজের জন্য ক্রস অরিজিন নয় - তবে, আইই 10 আসার আগে এটি ২০০৯ সালেও লেখা হয়েছিল। সুতরাং আমি ইঙ্গিত হিসাবে এটি গ্রহণ করব না যে এটি IE10 এ স্থির হয়েছে।

postMessageনিজেই যেমন , http://caniuse.com/#feat=x-doc-messaging উল্লেখযোগ্যভাবে ইঙ্গিত করে যে এটি এখনও আই 1010 এ ভাঙ্গা হয়েছে যা আপনার ডেমোটির সাথে মিলে গেছে বলে মনে হচ্ছে। এই নিবন্ধটিতে ক্যানিজ পাতাগুলি লিঙ্কগুলি রয়েছে, এতে একটি খুব প্রাসঙ্গিক উক্তি রয়েছে:

ইন্টারনেট এক্সপ্লোরার 8+ ক্রস ডকুমেন্ট মেসেজিংকে আংশিকভাবে সমর্থন করে: এটি বর্তমানে আইফ্রেমে কাজ করে তবে নতুন উইন্ডো নয়। ইন্টারনেট এক্সপ্লোরার 10 তবে মেসেজচ্যানেলকে সমর্থন করবে। ফায়ারফক্স বর্তমানে ক্রস ডকুমেন্ট মেসেজিং সমর্থন করে তবে ম্যাসেজচ্যানেল নয়।

সুতরাং আপনার সেরা MessageChannelবেটটি সম্ভবত একটি ভিত্তিক কোডপথ পাওয়া এবং postMessageএটি বিদ্যমান না থাকলে ফ্যালব্যাক । এটি আপনাকে IE8 / IE9 সমর্থন পাবে না, তবে অন্তত এটি আই 10 এর সাথে কাজ করবে।

দস্তাবেজগুলিতে MessageChannel: http://msdn.microsoft.com/en-us/library/windows/apps/hh441303.aspx

Question 3

প্রবর্তক হিসাবে একই হোস্টে একটি প্রক্সি পৃষ্ঠা তৈরি করুন। প্রক্সি পৃষ্ঠায় iframeরিমোট পৃষ্ঠাতে উত্স সেট রয়েছে। ক্রস-অরিজিন পোস্টম্যাসেজ এখন আই 10 তে এর মতো কাজ করবে:

রিমোট পৃষ্ঠাটি window.parent.postMessageপ্রক্সি পৃষ্ঠায় ডেটা পাস করতে ব্যবহার করে। যেহেতু এটি iframes ব্যবহার করে, এটি আইই 10 দ্বারা সমর্থিত
প্রক্সি পৃষ্ঠাটি window.opener.postMessageলঞ্চার পৃষ্ঠায় ফিরে ডেটা ব্যবহার করতে ব্যবহার করে। যেহেতু এটি একই ডোমেনে রয়েছে - কোনও ক্রস-উত্স সমস্যা নেই। আপনি পোস্টমেসেজ ব্যবহার করতে না চাইলে এটি সরাসরি লঞ্চার পৃষ্ঠায় বৈশ্বিক পদ্ধতিগুলিও কল করতে পারে - যেমন।window.opener.someMethod(data)

নমুনা (সমস্ত ইউআরএলগুলি কল্পিত)

প্রবর্তক পৃষ্ঠাতে 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>

Question 4

== 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;
    }
}

আমি যতই চেষ্টা করেছি না কেন, আমি আই 9 এবং আই 8 তে জিনিসগুলি তৈরি করতে সক্ষম হইনি

আমার কনফিগারেশন যেখানে এটি কাজ করছে:
আইই সংস্করণ: 11.0.10240.16590, আপডেট সংস্করণ: 11.0.25 (KB3100773)

Question 5

লিফটেক এবং আক্রিকোসের উত্তরের ভিত্তিতে আরেকটি কাজ হ'ল <iframe>একটি ফাঁকা পপআপ উইন্ডোর মধ্যে একটি তৈরি করা যা পৃথক প্রক্সি পৃষ্ঠার প্রয়োজনকে এড়িয়ে চলে, কারণ ফাঁকা পপআপটির উদ্বোধক একইরূপে origin

প্রবর্তক পৃষ্ঠাতে 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>

এটি কতটা নাজুক তা আমি নিশ্চিত নই, তবে এটি আইই 11 এবং ফায়ারফক্স 40.0.3 এ কাজ করছে।

Question 6

এই মুহুর্তে, (2014-09-02), এমএসডিএন ব্লগ পোস্টে উল্লিখিত প্রক্সি ফ্রেম ব্যবহার করা আপনার সেরা বাজি হ'ল এই ইস্যুটির কার্যকারিতার বিবরণ: https ://blogs.msdn.mic Microsoft.com/ieinternals/2009 / 09/15 / এইচটিএমএল 5-বাস্তবায়ন-ইস্যু-ই -8-এবং-পরবর্তী /

কার্যকরী উদাহরণটি এখানে: http://www.debugtheweb.com/test/xdm/origin/

আপনার পৃষ্ঠায় একটি প্রক্সি ফ্রেম সেট আপ করতে হবে যা পপআপের মতো একই উত্সযুক্ত। ব্যবহার করে প্রক্সি ফ্রেমে পপআপ থেকে তথ্য প্রেরণ করুন window.opener.frames[0]। তারপরে প্রক্সি ফ্রেম থেকে মূল পৃষ্ঠায় পোস্টম্যাসেজ ব্যবহার করুন।

Question 7

এই সমাধানটিতে স্থানীয় এক্সপ্লোরের সাইটগুলিতে নয় বরং ইন্টারনেট এক্সপ্লোরার বিশ্বাসযোগ্য সাইটগুলিতে সাইট যুক্ত করা জড়িত । আমি এই সমাধানটি উইন্ডোজ 10 / আইই 11.0.10240.16384, উইন্ডোজ 10 / মাইক্রোসফ্ট এজ 20.10240.16384.0 এবং উইন্ডোজ 7 এসপি 1 / আইই 10.0.9200.17148 এ পরীক্ষা করেছি। পৃষ্ঠাটি অবশ্যই ইন্ট্রানেট জোনে অন্তর্ভুক্ত করা উচিত নয় ।

সুতরাং ইন্টারনেট এক্সপ্লোরার কনফিগারেশন (সরঞ্জামসমূহ> ইন্টারনেট বিকল্পসমূহ> সুরক্ষা> বিশ্বস্ত সাইটগুলি> সাইটগুলি) খুলুন এবং পৃষ্ঠাটি যুক্ত করুন, এখানে আমি সমস্ত সাবডোমেনগুলির সাথে মেলে * ব্যবহার করি। নিশ্চিত করুন যে পৃষ্ঠাটি স্থানীয় ইন্ট্রানেট সাইটগুলিতে তালিকাভুক্ত নয় (সরঞ্জামসমূহ> ইন্টারনেট বিকল্পসমূহ> সুরক্ষা> স্থানীয় অন্তর্নিহিত> সাইটগুলি> উন্নত)। আপনার ব্রাউজারটি পুনরায় চালু করুন এবং আবার পরীক্ষা করুন।

ইন উইন্ডোজ 10 / মাইক্রোসফট এজ আপনি কন্ট্রোল প্যানেল> ইন্টারনেট বিকল্প এই কনফিগারেশন পাবেন।

হালনাগাদ

যদি এটি কাজ না করে আপনি সরঞ্জামগুলি> ইন্টারনেট বিকল্পসমূহ> উন্নত সেটিংস> ইন্টারনেট এক্সপ্লোরার সেটিংস পুনরায় সেট করুন এবং তারপরে পুনরায় সেট করুন: সাবধানতার সাথে এটি ব্যবহার করুন ! তারপরে আপনাকে আপনার সিস্টেমটি পুনরায় বুট করতে হবে। এর পরে বিশ্বস্ত সাইটগুলিতে সাইটগুলি যুক্ত করুন।

আপনার পৃষ্ঠাটি ফাইল> বৈশিষ্ট্যে কী জোনে রয়েছে তা বা ডান ক্লিকটি দেখুন।

হালনাগাদ

আমি কর্পোরেট ইন্ট্রানেটে আছি এবং কখনও কখনও এটি কাজ করে এবং কখনও কখনও এটি হয় না (স্বয়ংক্রিয় কনফিগারেশন? এমনকি আমি কর্পোরেট প্রক্সিটিকে দোষ দেওয়া শুরু করি)। শেষ পর্যন্ত আমি এই সমাধানটি https://stackoverflow.com/a/36630058/2692914 ব্যবহার করেছি ।

Question 8

এই কিউটি পুরানো তবে ইজিএক্সডিএম এর জন্য এটি, সম্ভবত আপনি যখন এমন কোনও ব্রাউজার আবিষ্কার করেন যা এইচটিএমএল 5 .পোস্টমেজেজ সমর্থন করে না:

https://easyxdm.net/

এটি VBObject মোড়ক এবং সমস্ত ধরণের স্টাফ ব্যবহার করে যা আপনি উইন্ডো বা ফ্রেমের মধ্যে ক্রস ডোমেন বার্তা প্রেরণের জন্য কখনই মোকাবেলা করতে চান না যেখানে উইন্ডো.পস্টম্যাসেজ বিভিন্ন আই সংস্করণে ব্যর্থ হয় (এবং প্রান্ত হতে পারে, এখনও সমর্থনটিতে 100% নিশ্চিত নয় প্রান্তটি রয়েছে তবে মনে হয় এটি। পোষ্টমেসেজের জন্যও কার্যকর হতে হবে)

Question 9

মেসেজচ্যানেল উইন্ডোজ / ট্যাবগুলির মধ্যে আইই 9-10- তে কাজ করে না কারণ এটি পোস্টম্যাসেজের উপর নির্ভর করে, যা এখনও এই দৃশ্যে ভেঙে গেছে। উইন্ডো.পেনার (যেমন উইন্ডো.ওপেনার.সোমফাঙ্কশন ("সোমডেটা")) এর মাধ্যমে একটি ফাংশন কল করা "সেরা" কর্মশক্তি।

এখানে আরও বিশদ বিবরণ