Template renderer init update (#1772)

* Update TemplateRendererFrameApi to post a 'ready' message

* Wait for 'ready' message rather than using 'load' event

2 files changed, 14 insertions, 7 deletions

diff --git a/ext/js/templates/template-renderer-frame-api.js b/ext/js/templates/template-renderer-frame-api.js
index dd6be517..f234c8e0 100644
--- a/ext/js/templates/template-renderer-frame-api.js
+++ b/ext/js/templates/template-renderer-frame-api.js
@@ -27,6 +27,7 @@ class TemplateRendererFrameApi {
 
     prepare() {
         window.addEventListener('message', this._onWindowMessage.bind(this), false);
+        this._postMessage(window.parent, 'ready', {}, null);
     }
 
     // Private
@@ -52,7 +53,7 @@ class TemplateRendererFrameApi {
         }
 
         if (typeof id === 'undefined') { return; }
-        source.postMessage({action: `${action}.response`, params: response, id}, '*');
+        this._postMessage(source, `${action}.response`, response, id);
     }
 
     _onRender({template, data, type}) {
@@ -101,4 +102,8 @@ class TemplateRendererFrameApi {
     _clone(value) {
         return JSON.parse(JSON.stringify(value));
     }
+
+    _postMessage(target, action, params, id) {
+        return target.postMessage({action, params, id}, '*');
+    }
 }
diff --git a/ext/js/templates/template-renderer-proxy.js b/ext/js/templates/template-renderer-proxy.js
index f35239cb..b93fdd6b 100644
--- a/ext/js/templates/template-renderer-proxy.js
+++ b/ext/js/templates/template-renderer-proxy.js
@@ -67,31 +67,33 @@ class TemplateRendererProxy {
 
     _loadFrame(frame, url, timeout=5000) {
         return new Promise((resolve, reject) => {
-            let ready = false;
             const cleanup = () => {
-                frame.removeEventListener('load', onLoad, false);
+                window.removeEventListener('message', onWindowMessage, false);
                 if (timer !== null) {
                     clearTimeout(timer);
                     timer = null;
                 }
             };
-            const onLoad = () => {
-                if (!ready) { return; }
+            const onWindowMessage = (e) => {
+                const frameWindow = frame.contentWindow;
+                if (frameWindow === null || frameWindow !== e.source) { return; }
+                const {data} = e;
+                if (!(typeof data === 'object' && data !== null && data.action === 'ready')) { return; }
                 cleanup();
                 resolve();
             };
 
             let timer = setTimeout(() => {
+                timer = null;
                 cleanup();
                 reject(new Error('Timeout'));
             }, timeout);
 
             frame.removeAttribute('src');
             frame.removeAttribute('srcdoc');
-            frame.addEventListener('load', onLoad, false);
+            window.addEventListener('message', onWindowMessage, false);
             try {
                 document.body.appendChild(frame);
-                ready = true;
                 frame.contentDocument.location.href = url;
             } catch (e) {
                 cleanup();