PostMessage ข้ามต้นทางเสียใน IE10 หรือไม่

Question 1

ฉันกำลังพยายามสร้าง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

Question 2

ฉันเข้าใจผิดเมื่อฉันโพสต์คำตอบนี้ในตอนแรก: มันใช้ไม่ได้จริงใน IE10 เห็นได้ชัดว่าผู้คนพบว่าสิ่งนี้มีประโยชน์ด้วยเหตุผลอื่น ๆ ดังนั้นฉันจึงทิ้งมันไว้เพื่อลูกหลาน คำตอบเดิมด้านล่าง:

สิ่งที่น่าสังเกต: ลิงก์ในคำตอบที่คุณเชื่อมโยงกับสถานะที่postMessageไม่ได้ข้ามจุดเริ่มต้นสำหรับหน้าต่างแยกต่างหากใน IE8 และ IE9 - อย่างไรก็ตามมันถูกเขียนในปี 2009 ก่อนที่ IE10 จะเข้ามา ดังนั้นฉันจะไม่ใช้สิ่งนั้นเป็นข้อบ่งชี้ว่าได้รับการแก้ไขใน IE10

สำหรับpostMessageตัวมันเองhttp://caniuse.com/#feat=x-doc-messagingโดยเฉพาะบ่งชี้ว่ามันยังใช้งานไม่ได้ใน IE10 ซึ่งดูเหมือนจะตรงกับการสาธิตของคุณ หน้า caniuse เชื่อมโยงไปยังบทความนี้ซึ่งมีคำพูดที่เกี่ยวข้องมาก:

Internet Explorer 8+ รองรับการส่งข้อความข้ามเอกสารบางส่วน: ขณะนี้ใช้งานได้กับ iframes แต่ไม่ใช่หน้าต่างใหม่ อย่างไรก็ตาม Internet Explorer 10 จะรองรับ MessageChannel ปัจจุบัน Firefox รองรับการส่งข้อความข้ามเอกสาร แต่ไม่ใช่ MessageChannel

ดังนั้นทางออกที่ดีที่สุดของคุณคือการมีMessageChannelcodepath ที่ใช้และทางเลือกpostMessageหากไม่มีอยู่ มันจะไม่ได้รับการสนับสนุน IE8 / IE9 แต่อย่างน้อยมันก็ใช้งานได้กับ IE10

เอกสารบนMessageChannel: http://msdn.microsoft.com/en-us/library/windows/apps/hh441303.aspx

Question 3

สร้างหน้าพร็อกซีบนโฮสต์เดียวกับตัวเรียกใช้งาน หน้าพร็อกซีมีiframeซอร์สที่ตั้งค่าเป็นเพจระยะไกล ตอนนี้ postMessage ข้ามแหล่งที่มาจะทำงานใน IE10 ดังนี้:

เพจระยะไกลใช้window.parent.postMessageส่งข้อมูลไปยังเพจพร็อกซี เนื่องจากใช้ iframe จึงรองรับโดย IE10
หน้าพร็อกซีใช้window.opener.postMessageเพื่อส่งข้อมูลกลับไปที่หน้าตัวเรียกใช้งาน เนื่องจากอยู่ในโดเมนเดียวกันจึงไม่มีปัญหาข้ามแหล่งที่มา นอกจากนี้ยังสามารถเรียกใช้วิธีการส่วนกลางบนหน้าตัวเรียกใช้งานได้โดยตรงหากคุณไม่ต้องการใช้ postMessagewindow.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>

Question 4

== โซลูชันการทำงานในปี 2020 โดยไม่มี iframe ==

จากคำตอบโดยยุ่งเหยิงฉันประสบความสำเร็จใน IE11 [และจำลองโหมด IE10] โดยใช้ตัวอย่างต่อไปนี้:

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

จากนั้นฉันก็สามารถสื่อสารโดยใช้สแต็ก postMessage ทั่วไปฉันใช้ผู้ส่งสารแบบคงที่ทั่วโลกในสถานการณ์ของฉัน (แม้ว่าฉันจะไม่คิดว่ามันเป็นสัญญาณบ่งชี้ใด ๆ แต่ฉันก็แนบคลาส Messenger ของฉันด้วย)

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)

Question 5

จากคำตอบของ 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 และ Firefox 40.0.3

Question 6

ตอนนี้ (2014-09-02) ทางออกที่ดีที่สุดของคุณคือใช้เฟรมพร็อกซีตามที่ระบุไว้ในบล็อกโพสต์ msdn ซึ่งให้รายละเอียดวิธีแก้ปัญหาสำหรับปัญหานี้: https://blogs.msdn.microsoft.com/ieinternals/2009 / 09/15 / html5 -plement-issue-in-ie8-and-later /

นี่คือตัวอย่างการทำงาน: http://www.debugtheweb.com/test/xdm/origin/

คุณต้องตั้งค่าเฟรมพร็อกซีบนเพจของคุณที่มีจุดเริ่มต้นเดียวกับป๊อปอัป window.opener.frames[0]ส่งข้อมูลจากป๊อปอัพไปที่กรอบภาพโดยใช้พร็อกซี่ จากนั้นใช้ postMessage จากกรอบพร็อกซีไปยังหน้าหลัก

Question 7

โซลูชันนี้เกี่ยวข้องกับการเพิ่มไซต์ลงในไซต์ที่เชื่อถือได้ของ Internet Explore และไม่ได้อยู่ในไซต์อินทราเน็ตเฉพาะที่ ฉันทดสอบโซลูชันนี้ใน Windows 10 / IE 11.0.10240.16384, Windows 10 / Microsoft Edge 20.10240.16384.0 และ Windows 7 SP1 / IE 10.0.9200.17148 หน้าจะต้องไม่ถูกรวมอยู่ในโซนอินทราเน็ต

ดังนั้นเปิดการกำหนดค่า Internet Explorer (เครื่องมือ> ตัวเลือกอินเทอร์เน็ต> ความปลอดภัย> ไซต์ที่เชื่อถือได้> ไซต์) และเพิ่มเพจที่นี่ฉันใช้ * เพื่อจับคู่โดเมนย่อยทั้งหมด ตรวจสอบให้แน่ใจว่าหน้านั้นไม่อยู่ในไซต์อินทราเน็ตเฉพาะที่ (เครื่องมือ> ตัวเลือกอินเทอร์เน็ต> ความปลอดภัย> อินทราเน็ตภายใน> ไซต์> ขั้นสูง) รีสตาร์ทเบราว์เซอร์ของคุณและทดสอบอีกครั้ง

ในWindows 10 / Microsoft Edgeคุณจะพบการกำหนดค่านี้ในแผงควบคุม> ตัวเลือกอินเทอร์เน็ต

อัปเดต

หากวิธีนี้ไม่ได้ผลคุณสามารถลองรีเซ็ตการตั้งค่าทั้งหมดของคุณในเครื่องมือ> ตัวเลือกอินเทอร์เน็ต> การตั้งค่าขั้นสูง> รีเซ็ตการตั้งค่า Internet Explorerจากนั้นรีเซ็ต: ใช้ด้วยความระมัดระวัง ! จากนั้นคุณจะต้องรีบูตระบบของคุณ หลังจากนั้นให้เพิ่มไซต์ลงในไซต์ที่เชื่อถือได้

ดูว่าเพจของคุณอยู่ในโซนใดในไฟล์> คุณสมบัติหรือคลิกขวา

อัปเดต

ฉันอยู่ในอินทราเน็ตขององค์กรและบางครั้งก็ใช้งานได้และบางครั้งก็ใช้ไม่ได้ (การกำหนดค่าอัตโนมัติฉันเริ่มตำหนิพร็อกซีขององค์กร) ในท้ายที่สุดผมใช้วิธีนี้https://stackoverflow.com/a/36630058/2692914

Question 8

Q นี้เก่า แต่นี่คือสิ่งที่ easyXDM มีไว้สำหรับอาจตรวจสอบว่าเป็นทางเลือกที่อาจเกิดขึ้นเมื่อคุณตรวจพบเบราว์เซอร์ที่ไม่รองรับ html5 .postMessage:

https://easyxdm.net/

ใช้ VBObject wrapper และสิ่งต่างๆทุกประเภทที่คุณไม่ต้องการจัดการเพื่อส่งข้อความข้ามโดเมนระหว่างหน้าต่างหรือเฟรมที่ window.postMessage ล้มเหลวสำหรับ IE เวอร์ชันต่างๆ (และขอบอาจยังไม่แน่ใจ 100% ในการสนับสนุน Edge มี แต่ดูเหมือนว่าจะต้องมีวิธีแก้ปัญหาสำหรับ. PostMessage ด้วย)

Question 9

MessageChannel ใช้ไม่ได้กับ IE 9-11 ระหว่างหน้าต่าง / แท็บเนื่องจากใช้ postMessage ซึ่งยังคงใช้งานไม่ได้ในสถานการณ์นี้ วิธีแก้ปัญหาที่ "ดีที่สุด" คือการเรียกใช้ฟังก์ชันผ่าน window.opener (เช่น window.opener.somefunction ("somedata"))

วิธีแก้ปัญหาโดยละเอียดเพิ่มเติมที่นี่