Use new IFrame height adaptation mechanism without denpendence on postMessage

CHANGELOG.rst

@@ -42,6 +42,7 @@ Changed
 Fixed
 ~~~~~
 
+* In some cases, the IFrame for legacy pages was not properly sized for its content.
 * The system tried to send notifications for done background tasks
   in addition to tasks started in the foreground.
 * Invitations for existing short name did not work.

aleksis/core/frontend/components/LegacyBaseTemplate.vue

@@ -37,15 +37,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
@@ -69,12 +60,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

aleksis/core/templates/core/base.html

@@ -76,13 +76,6 @@
 <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
 <script>
   $(document).ready(function () {
-    window.parent.postMessage({height: $(document).height()});
-
-    function documentResizePostMessage() {
-      window.parent.postMessage({height: $(document).height()});
-    };
-    window.onresize = documentResizePostMessage;
-
     function findLink(el) {
       if (el.href) {
         return el.href;