Resolve "IFrame height is sometimes not set/updated correctly in LegacyBaseTemplate"

Closes #790 (closed)

aleksis/core/frontend/components/LegacyBaseTemplate.vue

@@ -53,15 +53,6 @@ export default {
     },
   },
   methods: {
-    /** Receives a message from the legacy app inside the iframe */
-    receiveMessage(event) {
-      if (event.data.height) {
-        // The iframe communicated us its render height
-        //  Set iframe to full height to prevent an inner scroll bar
-        this.iFrameHeight = event.data.height;
-        this.$root.contentLoading = false;
-      }
-    },
     /** Handle iframe data after inner page loaded */
     load() {
       // Write new location of iframe back to Vue Router
@@ -85,12 +76,14 @@ export default {
       // Write title of iframe to SPA window
       const title = this.$refs.contentIFrame.contentWindow.document.title;
       this.$root.$setPageTitle(title);
+
+      // Adapt height of IFrame according to the height of its contents once and listen to resize events
+      this.iFrameHeight = this.$refs.contentIFrame.contentDocument.body.scrollHeight;
+      this.$refs.contentIFrame.contentWindow.onresize = () => {this.iFrameHeight = this.$refs.contentIFrame.contentDocument.body.scrollHeight};
+
+      this.$root.contentLoading = false;
     },
   },
-  mounted() {
-    // Subscribe to message channel to receive height from iframe
-    this.safeAddEventListener(window, "message", this.receiveMessage);
-  },
   watch: {
     $route() {
       // Show loading animation once route changes