Auto-resize pages when embedded in an iframe

Author: aliseankhan

data-science-research.html

@@ -254,5 +254,6 @@ <h4>HAAG</h4>
     <div class="gt-footer-bottom">&copy; 2026 Georgia Institute of Technology &middot; Human-Augmented Analytics Group</div>
   </footer>
 
+<script src="embed-resize.js" defer></script>
 </body>
 </html>

embed-resize.js

@@ -0,0 +1,17 @@
+// When this site is shown inside an iframe, report the page height to the
+// parent so it can size the frame to fit (used by the GT WordPress embed).
+(function () {
+  if (window.parent === window) return;
+  var lastHeight = 0;
+  function send() {
+    var height = Math.ceil(
+      Math.max(document.body.scrollHeight, document.body.getBoundingClientRect().height)
+    );
+    if (height === lastHeight) return;
+    lastHeight = height;
+    window.parent.postMessage({ type: "haag-embed-height", height: height }, "*");
+  }
+  new ResizeObserver(send).observe(document.body);
+  window.addEventListener("load", send);
+  send();
+})();

faculty-affiliates.html

@@ -289,5 +289,6 @@ <h4>HAAG</h4>
     <div class="gt-footer-bottom">&copy; 2026 Georgia Institute of Technology &middot; Human-Augmented Analytics Group</div>
   </footer>
 
+<script src="embed-resize.js" defer></script>
 </body>
 </html>

index.html

@@ -376,5 +376,6 @@ <h4>HAAG</h4>
     <div class="gt-footer-bottom">&copy; 2026 Georgia Institute of Technology &middot; Human-Augmented Analytics Group</div>
   </footer>
 
+<script src="embed-resize.js" defer></script>
 </body>
 </html>

people.html

@@ -379,5 +379,6 @@ <h3>${escapeHtml(f.title)}</h3>
 
     loadPeople();
   </script>
+<script src="embed-resize.js" defer></script>
 </body>
 </html>

phd-postdoc.html

@@ -231,5 +231,6 @@ <h4>HAAG</h4>
     <div class="gt-footer-bottom">&copy; 2026 Georgia Institute of Technology &middot; Human-Augmented Analytics Group</div>
   </footer>
 
+<script src="embed-resize.js" defer></script>
 </body>
 </html>

project-explorer.html

@@ -928,5 +928,6 @@ <h4>HAAG</h4>
       </div>
       <div class="gt-footer-bottom">&copy; 2026 Georgia Institute of Technology &middot; Human-Augmented Analytics Group</div>
     </footer>
-  </body>
+  <script src="embed-resize.js" defer></script>
+</body>
 </html>

project-management.html

@@ -232,5 +232,6 @@ <h4>HAAG</h4>
     <div class="gt-footer-bottom">&copy; 2026 Georgia Institute of Technology &middot; Human-Augmented Analytics Group</div>
   </footer>
 
+<script src="embed-resize.js" defer></script>
 </body>
 </html>

recruitment.html

@@ -447,5 +447,6 @@ <h4>HAAG</h4>
 
     loadStatus();
   </script>
+<script src="embed-resize.js" defer></script>
 </body>
 </html>

team-matching.html

@@ -253,5 +253,6 @@ <h4>HAAG</h4>
       </div>
     `).join("");
   </script>
+<script src="embed-resize.js" defer></script>
 </body>
 </html>