From 4114a7088a7161a8aebf27d20433c0f47a4f178c Mon Sep 17 00:00:00 2001 From: Matt Hodges Date: Thu, 15 Dec 2022 09:18:59 -0600 Subject: [PATCH] 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 * Call loaded() if ready, otherwise add listenter * lint fix Co-authored-by: Claire --- public/embed.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/public/embed.js b/public/embed.js index 5607c24d5f..defba403e4 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} */ 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,