send manual inits on load

yext · Jun 1, 2021 · c52db98 · c52db98
1 parent 30d2e07
commit c52db98
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 13 deletions.
diff --git a/static/js/answers-experience-frame.js b/static/js/answers-experience-frame.js
@@ -3,6 +3,7 @@ import { sendToIframe } from './iframe-common';
 export default class AnswersExperienceFrame {
   constructor (runtimeConfig) {
     this.runtimeConfig = runtimeConfig;
+    this._hasManuallyInitialized = false;
 
     runtimeConfig._onUpdate(updatedConfig => {
       sendToIframe({ runtimeConfig: updatedConfig });
@@ -16,12 +17,25 @@ export default class AnswersExperienceFrame {
    * @param {Object} config 
    */
   init (config) {
+    if (this.hasManuallyInitialized()) {
+      return;
+    }
     Object.entries(config).forEach(([key, value]) => {
       this.runtimeConfig.set(key, value);
     });
     sendToIframe({ 
       initAnswersExperience: true,
       runtimeConfig: this.runtimeConfig.getAll()
     });
+    this._hasManuallyInitialized = true;
+  }
+
+  /**
+   * Returns whether or not the init function has been called
+   *
+   * @returns {boolean}
+   */
+  hasManuallyInitialized () {
+    return this._hasManuallyInitialized;
   }
 }
diff --git a/static/js/iframe-common.js b/static/js/iframe-common.js
@@ -11,9 +11,9 @@ const iframeMessageQueue = [];
  * Puts an iframe on the page of an Answers experience and sets up resizing and cross-domain communication
  * 
  * @param {string} domain The location of the answers experience
- * @param {RuntimeConfig} runtimeConfig used for passing runtime config to the iframe
+ * @param {AnswersExperienceFrame} answersExperienceFrame
  */
-export function generateIFrame(domain, runtimeConfig) {
+export function generateIFrame(domain, answersExperienceFrame) {
   var isLocalHost = window.location.host.split(':')[0] === 'localhost';
   var containerEl = document.querySelector('#answers-container');
   var iframe = document.createElement('iframe');
@@ -95,12 +95,13 @@ export function generateIFrame(domain, runtimeConfig) {
     checkOrigin: false,
     onInit: function() {
       iframeInitialized = true;
-      runtimeConfig && iframeMessageQueue.push({
-        runtimeConfig: runtimeConfig.getAll()
-      });
-      iframeMessageQueue.forEach(message => {
-        sendToIframe(message);
+      iframeMessageQueue.push({
+        initAnswersExperience: answersExperienceFrame.hasManuallyInitialized(),
+        runtimeConfig: answersExperienceFrame.runtimeConfig.getAll()
       });
+      while (iframeMessageQueue.length !== 0) {
+        sendToIframe(iframeMessageQueue.shift());
+      }
     },
     onMessage: function(messageData) {
       const message = JSON.parse(messageData.message);

diff --git a/static/js/iframe-prod.js b/static/js/iframe-prod.js
@@ -4,7 +4,8 @@ import RuntimeConfig from './runtime-config';
 import AnswersExperienceFrame from './answers-experience-frame';
 
 const runtimeConfig = new RuntimeConfig();
-window.AnswersExperienceFrame = new AnswersExperienceFrame(runtimeConfig);
+const answersExperienceFrame = new AnswersExperienceFrame(runtimeConfig);
+window.AnswersExperienceFrame = answersExperienceFrame;
 
 const prodDomain = new InjectedData().getProdDomain();
-generateIFrame(prodDomain, runtimeConfig);
+generateIFrame(prodDomain, answersExperienceFrame);
diff --git a/static/js/iframe-staging.js b/static/js/iframe-staging.js
@@ -4,7 +4,8 @@ import RuntimeConfig from './runtime-config';
 import AnswersExperienceFrame from './answers-experience-frame';
 
 const runtimeConfig = new RuntimeConfig();
-window.AnswersExperienceFrame = new AnswersExperienceFrame(runtimeConfig);
+const answersExperienceFrame = new AnswersExperienceFrame(runtimeConfig);
+window.AnswersExperienceFrame = answersExperienceFrame;
 
 const stagingDomain = new InjectedData().getStagingDomain();
-generateIFrame(stagingDomain, runtimeConfig);
+generateIFrame(stagingDomain, answersExperienceFrame);
diff --git a/static/js/iframe.js b/static/js/iframe.js
@@ -4,7 +4,8 @@ import RuntimeConfig from './runtime-config';
 import AnswersExperienceFrame from './answers-experience-frame';
 
 const runtimeConfig = new RuntimeConfig();
-window.AnswersExperienceFrame = new AnswersExperienceFrame(runtimeConfig);
+const answersExperienceFrame = new AnswersExperienceFrame(runtimeConfig);
+window.AnswersExperienceFrame = answersExperienceFrame;
 
 const domain = new InjectedData().getDomain();
-generateIFrame(domain, runtimeConfig);
+generateIFrame(domain, answersExperienceFrame);