Embed js height fix (#22141)

* only begin iframe reheight once document state is complete

* format

* lint fixes

* Update public/embed.js to use readystatechange event listener

Co-authored-by: Claire <claire.github-309c@sitedethib.com>

* Call loaded() if ready, otherwise add listenter

* lint fix

Co-authored-by: Claire <claire.github-309c@sitedethib.com>

1 files changed, 13 insertions, 9 deletions

diff --git a/public/embed.js b/public/embed.js
index 5607c24d5..defba403e 100644
--- a/public/embed.js
+++ b/public/embed.js
@@ -1,24 +1,28 @@
 // @ts-check
 
-(function() {
+(function () {
   'use strict';
 
   /**
    * @param {() => void} loaded
    */
-  var ready = function(loaded) {
-    if (['interactive', 'complete'].indexOf(document.readyState) !== -1) {
+  var ready = function (loaded) {
+    if (document.readyState === 'complete') {
       loaded();
     } else {
-      document.addEventListener('DOMContentLoaded', loaded);
+      document.addEventListener('readystatechange', function () {
+        if (document.readyState === 'complete') {
+          loaded();
+        }
+      });
     }
   };
 
-  ready(function() {
+  ready(function () {
     /** @type {Map<number, HTMLIFrameElement>} */
     var iframes = new Map();
 
-    window.addEventListener('message', function(e) {
+    window.addEventListener('message', function (e) {
       var data = e.data || {};
 
       if (typeof data !== 'object' || data.type !== 'setHeight' || !iframes.has(data.id)) {
@@ -34,7 +38,7 @@
       iframe.height = data.height;
     });
 
-    [].forEach.call(document.querySelectorAll('iframe.mastodon-embed'), function(iframe) {
+    [].forEach.call(document.querySelectorAll('iframe.mastodon-embed'), function (iframe) {
       // select unique id for each iframe
       var id = 0, failCount = 0, idBuffer = new Uint32Array(1);
       while (id === 0 || iframes.has(id)) {
@@ -49,10 +53,10 @@
 
       iframes.set(id, iframe);
 
-      iframe.scrolling      = 'no';
+      iframe.scrolling = 'no';
       iframe.style.overflow = 'hidden';
 
-      iframe.onload = function() {
+      iframe.onload = function () {
         iframe.contentWindow.postMessage({
           type: 'setHeight',
           id: id,