gajewsk2
commented
7 years ago Penpal.connectToChild = function (_ref) {
var url = _ref.url,
appendTo = _ref.appendTo,
_ref$methods = _ref.methods,
methods = _ref$methods === undefined ? {} : _ref$methods;
var destroy = void 0;
var destructionPromise = new DestructionPromise(function (resolve) {
return destroy = resolve;
});
var parent = window;
var iframe = document.createElement('iframe');
(appendTo || document.body).appendChild(iframe);
destructionPromise.then(function () {
if (iframe.parentNode) {
iframe.parentNode.removeChild(iframe);
}
});
var child = iframe.contentWindow || iframe.contentDocument.parentWindow;
var childOrigin = getOriginFromUrl(url);
// NEW PART
var manualHandshake = () => {
child.postMessage({
penpal: HANDSHAKE,
methodNames: Object.keys(methods)
}, childOrigin);
};
var promise = new Penpal.Promise(function (resolve, reject) {
var handleMessage = function handleMessage(event) {
if (event.source === child && event.origin === childOrigin && event.data.penpal === HANDSHAKE_REPLY) {
log('Parent: Received handshake reply from Child');
parent.removeEventListener(MESSAGE, handleMessage);
var info = {
localName: PARENT,
local: parent,
remote: child,
remoteOrigin: event.origin
};
connectCallReceiver(info, methods, destructionPromise);
resolve(createCallSender(info, event.data.methodNames, destructionPromise));
}
};
var handleIframeLoaded = function handleIframeLoaded() {
log('Parent: Sending handshake');
parent.addEventListener(MESSAGE, handleMessage);
destructionPromise.then(function () {
parent.removeEventListener(MESSAGE, handleMessage);
});
child.postMessage({
penpal: HANDSHAKE,
methodNames: Object.keys(methods)
}, childOrigin);
};
iframe.addEventListener(LOAD, handleIframeLoaded);
destructionPromise.then(function () {
iframe.removeEventListener(LOAD, handleIframeLoaded);
reject('Parent: Connection destroyed');
});
log('Parent: Loading iframe');
iframe.src = url;
});
return {
promise: promise,
iframe: iframe,
destroy: destroy,
manualHandshake: manualHandshake
};
};Then manually call:
window.addEventListener('message', (event) => {
if (event.data.someDevMessageThatIndicatesLoad) {
_connection.manualHandshake();
}
});
michael-simon
Aaronius
System.js loads assets asynchronously (in development) and this causes the iframe's 'load' event to fire pre-emptively, for the purposes of Penpal. The child's connectToParent function has not been called, so it cannot receieve the message from the parent that is sent after the iframe's load event fires.
We have yet to find a way to cause System.js to load synchronously, except with bundling, which is only used in production. Currently we have developed a work-around that involves exposing a version of the handleIframeLoaded function that only calls the child.postMessage HANDSHAKE part of the function (which we have dubbed 'manualHandshake'). We then have the child send a message to the parent once System.js has done its work, to trigger a re-handshake.
The other solutions we tried, such as trying to re-fiore the Load event, didn't work because we are inside a situation where CORS is blocking us, which is what we wanted Penpal for in the first place.
Do you have any opinions or advice on how to address this issue without a code change to the repository? Alternately, we could submit a pull request with our solution if the solution sounds reasonable and useful. (Current 'issue' with the pull request is that it would change the return interface of connectToChild to return this extra handshaking function as well.)