iframe dynamic height using postMessage

StampyAI · Sep 4, 2023 · 5f706c2 · 5f706c2
1 parent 001ade3
commit 5f706c2
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 10 deletions.
diff --git a/app/root.css b/app/root.css
@@ -67,6 +67,7 @@ html {
 html.embed {
   background: transparent;
   padding: var(--paddingSides) 0;
+  overflow: hidden; /* change height of iframe to avoid nested scroll, see embed-example.html */
 }
 
 body {
@@ -308,7 +309,7 @@ article > h2 {
   border-radius: 2px;
 }
 
-article > h2 > .chevron {
+article > h2.chevron {
   cursor: pointer;
 }
 

diff --git a/app/root.tsx b/app/root.tsx
@@ -6,6 +6,7 @@ import {useLoaderData} from '@remix-run/react'
 import {questionsOnPage} from '~/hooks/stateModifiers'
 import {loadQuestionDetail} from '~/server-utils/stampy'
 import {useTheme} from './hooks/theme'
+import {useEffect} from 'react'
 
 /*
  * Transform the given text into a meta header format.
@@ -137,6 +138,26 @@ export default function App() {
   const {savedTheme} = useTheme()
   const context: Context = {minLogo, embed}
 
+  useEffect(() => {
+    if (embed) {
+      // send new height to the parent page of iframe
+      let lastHeight = 0
+      const observer = new MutationObserver(() => {
+        const height =
+          Math.floor(document.querySelector('main')?.getBoundingClientRect().height || 0) + 30
+
+        // avoid slowly increasing height due to rounding errors and 100% height
+        if (Math.abs(lastHeight - height) < 3) return
+
+        window.parent.postMessage({type: 'aisafety.info__height', height}, '*')
+        lastHeight = height
+      })
+      observer.observe(document.body, {attributes: true, subtree: true})
+
+      return () => observer.disconnect()
+    }
+  }, [embed])
+
   return (
     <html lang="en" className={`${embed ? 'embed' : ''} ${savedTheme ?? ''}`}>
       <Head minLogo={minLogo} />

diff --git a/public/embed-example.html b/public/embed-example.html
@@ -2,23 +2,22 @@
 <div>Some content before embedding aisafety.info search...</div>
 
 <iframe
-  src="/?embed&showInitial&placeholder=Search the AI Safety FAQ&theme=light"
+  src="/?embed&showInitial&showDetails&placeholder=Search the AI Safety FAQ&theme=light"
   width="100%"
-  height="330px"
+  height="315px"
   frameborder="0"
   id="ai-safety-search-iframe"
   style="transition: height 0.3s; overflow: hidden;"
 ></iframe>
 
-<div>Some content between...</div>
+<div>Some content after...</div>
 
 <script>
   'use strict'
   const iframe = document.getElementById('ai-safety-search-iframe')
-  const iframeWindow = iframe.contentWindow
-  const expand = () => {
-    iframe.style.height = '600px'
-    iframeWindow.removeEventListener('keydown', expand)
-  }
-  iframeWindow.addEventListener('keydown', expand)
+  window.addEventListener('message', function (event) {
+    if (event.data.type === 'aisafety.info__height') {
+      iframe.style.height = event.data.height + 'px'
+    }
+  })
 </script>