IE11 compatibility

The library is currently not compatible with IE11.

There are two issues:

• postMessage supports only string payload
• getOriginFromUrl seems broken, e.g. protocol and port was missing

Possible URI fix var childOrigin = new URI(window.location.href).path(url).origin(); with https://medialize.github.io/URI.js/

A way for postMessage IE compatibility:

let Compat = {

  init: () => {
    var ieVersion = Compat.detectIE();
    Compat.stringifyPostMessages = (ieVersion !== false && Compat.detectIE() <= 11);
  },

  detectIE: () => {
    var ua = window.navigator.userAgent;

    var msie = ua.indexOf('MSIE ');
    if (msie > 0) {
      // IE 10 or older => return version number
      return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
    }

    var trident = ua.indexOf('Trident/');
    if (trident > 0) {
      // IE 11 => return version number
      var rv = ua.indexOf('rv:');
      return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
    }

    var edge = ua.indexOf('Edge/');
    if (edge > 0) {
      // Edge (IE 12+) => return version number
      return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
    }

    // other browser
    return false;
  },

  postMessage: (target, data, remoteOrigin) => {

    if (Compat.stringifyPostMessages) {
      return Compat.postMessageCompat(target, data, remoteOrigin);
    } else {
      target.postMessage(data, remoteOrigin);
    }

  },

  addMessageListener: (target, listener) => {
    if (Compat.stringifyPostMessages) {
      return Compat.addMessageListenerCompat(target, listener);
    } else {
      target.addEventListener(MESSAGE, listener, false);

      return {
        remove: () => {
          target.removeEventListener(MESSAGE, listener);
        }
      };
    }
  },

  postMessageCompat: (target, data, remoteOrigin) => {

    let str = JSON.stringify(data);
    target.postMessage(str, remoteOrigin);

  },

  addMessageListenerCompat: (target, listener) => {

    let wrapped = (e) => {

      if (e.data && e.data.startsWith("{")) {
        let data = JSON.parse(e.data);
        let ec = {
          data: data,
          source: e.source,
          origin: e.origin
        };
        listener(ec);
      } else {
        listener(e);
      }

    };

    target.addEventListener(MESSAGE, wrapped);

    return {
      remove: () => {
        target.removeEventListener(MESSAGE, wrapped);
      }
    };

  }

};

Compat.init();

[Aaronius]

Okay, I think I have this figured out and fixed in 2.4.1. You can see my changes here: https://github.com/Aaronius/penpal/commit/f04c4907be4e513fea0e78c1f5e18ceae4c4118c

Basically, in browsers where we have to compute the childOrigin, we need to not add the port to the computed string if the port is the default for the protocol. Because we were always adding the port, it wasn’t matching the origin reported by the browser on message events.

The approach I’ve taken appears to match what’s done in the whatwg-url library here.

You might be able to view the working jsbin here: http://output.jsbin.com/leqovofite

Thanks again for reporting this issue and writing up the jsbin. Please let me know if you see any problems.

[Aaronius]

Good to hear. Thanks!