aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-06-27 18:16:21 -0400
committerGitHub <noreply@github.com>2021-06-27 18:16:21 -0400
commit32d5fccc3634aa7da440faac67b69b0088b205b6 (patch)
tree0a1ce3431b22204f0cc3354ceeba9dae0b56edf0
parent002da9fba8800b796ed98dd83e2ab68b4d37a1cc (diff)
Template renderer init update (#1772)
* Update TemplateRendererFrameApi to post a 'ready' message * Wait for 'ready' message rather than using 'load' event
-rw-r--r--ext/js/templates/template-renderer-frame-api.js7
-rw-r--r--ext/js/templates/template-renderer-proxy.js14
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();