Use ResizeObserver to detect DOM changes and notify resize event to the parent window

Author: cheton

src/index.js

@@ -1,4 +1,5 @@
 import qs from 'qs';
+import ResizeObserver from './lib/ResizeObserver';
 import controller from './lib/controller';
 import log from './lib/log';
 import './styles/vendor.styl';
@@ -63,6 +64,24 @@ import(`./widgets/${widget}`)
                 }
             }, '*');
         });
+
+        new ResizeObserver(() => {
+            // Use the postMessage API for inter-frame communication
+            window.parent.postMessage({
+                token: params.token,
+                action: {
+                    type: 'resize',
+                    payload: {
+                        clientHeight: document.body.clientHeight,
+                        clientWidth: document.body.clientWidth,
+                        offsetHeight: document.body.offsetHeight,
+                        offsetWidth: document.body.offsetWidth,
+                        scrollHeight: document.body.scrollHeight,
+                        scrollWidth: document.body.scrollWidth
+                    }
+                }
+            }, '*');
+        }).observe(document.body);
     })
     .catch(err => {
         log.error(err);

src/lib/ResizeObserver.js

@@ -0,0 +1,40 @@
+class ResizeObserver {
+    callback = null;
+    observer = null;
+
+    constructor(callback) {
+        if (typeof callback === 'function') {
+            this.callback = callback;
+        }
+        return this;
+    }
+    observe(target) {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+
+        this.callback && this.callback();
+
+        this.observer = new MutationObserver(mutations => {
+            this.callback && this.callback();
+        });
+
+        this.observer.observe(target, {
+            attributes: true,
+            attributeOldValue: false,
+            characterData: true,
+            characterDataOldValue: false,
+            childList: true,
+            subtree: true
+        });
+    }
+    disconnect() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+}
+
+export default ResizeObserver;