fix(DIST-682): Send post message only if the form is present on page

Typeform · Mar 23, 2021 · 3d3c5a5 · 3d3c5a5
1 parent 5277fde
commit 3d3c5a5
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 4 deletions.
diff --git a/demo/widget-tabs.html b/demo/widget-tabs.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Widget example</title>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+    <link rel="stylesheet" href="demo.css" />
+  </head>
+  <body>
+    <p>A typeform widget will load below</p>
+    <ul>
+      <li><a href="#" onClick="openTab(0)">form one</a></li>
+      <li><a href="#" onClick="openTab(1)">form two</a></li>
+      <li><a href="#" onClick="openTab(2)">form three</a></li>
+      <li><a href="#" onClick="openTab(3)">form four</a></li>
+    </ul>
+    <div id="content"></div>
+
+    <script type="text/javascript" src="embed.js"></script>
+    <script type="text/javascript" src="demo.js"></script>
+
+    <script>
+      const forms = [
+        '//betatests.typeform.com/to/Z9k3bK',
+        '//betatests.typeform.com/to/qPu9dB',
+        '//lednicky.typeform.com/to/Cqrg7cgL',
+        '//lednicky.typeform.com/to/jAJ5qj',
+      ]
+      function openTab(index) {
+        const elm = document.querySelector('#content')
+        elm.innerHTML = ''
+
+        const widget = document.createElement('div')
+        elm.append(widget)
+        window.typeformEmbed.makeWidget(widget, forms[index])
+      }
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "license": "LGPL-3.0-only",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Typeform/embed.git"
+    "url": "git@github.com:Typeform/embed.git"
   },
   "main": "build/lib.pure.js",
   "module": "build/lib.pure.js",

diff --git a/src/core/features/google-analytics-instance-sharing.js b/src/core/features/google-analytics-instance-sharing.js
@@ -5,13 +5,17 @@ const setupGoogleAnalyticsInstanceSharingFeature = (iframeRef, embedId) => {
 
   if (gaObject === undefined || gaObject === null) {
     // eslint-disable-next-line no-console
-    console.error(`Whoops! You enabled the shareGoogleAnalyticsInstance feature but the google analytics object has not been found. 
+    console.error(`Whoops! You enabled the shareGoogleAnalyticsInstance feature but the google analytics object has not been found.
       Make sure to include Google Analytics Javascript code before the Typeform Embed Javascript code in your page.`)
   }
 
   const sendGaIdMessage = (gaClientId) => {
     const data = { embedId, gaClientId }
-    setTimeout(() => iframeRef.contentWindow.postMessage({ type: 'ga-client-id', data }, '*'), 0)
+    setTimeout(() => {
+      if (iframeRef && iframeRef.contentWindow) {
+        iframeRef.contentWindow.postMessage({ type: 'ga-client-id', data }, '*')
+      }
+    }, 0)
   }
 
   gaObject((tracker) => {

diff --git a/src/core/views/widget.js b/src/core/views/widget.js
@@ -246,7 +246,11 @@ class Widget extends Component {
       return
     }
 
-    setTimeout(() => iframeRef.contentWindow.postMessage('embed-focus', '*'), 100)
+    setTimeout(() => {
+      if (iframeRef && iframeRef.contentWindow) {
+        iframeRef.contentWindow.postMessage('embed-focus', '*')
+      }
+    }, 100)
   }
 
   render() {