MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 16: / Line 16: @@
    if (!iframe) return;
-   iframe.style.width = "100%";
+  iframe.style.display = "block";
+   iframe.style.width = "100vw";
+  iframe.style.maxWidth = "100%";
+  iframe.style.marginLeft = "calc(-50vw + 50%)";
    iframe.style.border = "none";
    iframe.style.overflow = "hidden";
+  iframe.setAttribute("scrolling", "no");
-   window.addEventListener("message", (event) => {
+   const setH = (h) => {
-     if (typeof event.data === "object" && event.data.type === "resizeIframe") {
+    const height = Math.max(200, Math.floor(h || 0));
-       iframe.style.height = event.data.height + "px";
+     if (iframe.style.height !== height + "px") {
+       iframe.style.height = height + "px";
      }
-   });
+   };
+  function trySameOriginWiring() {
+    try {
+      const doc = iframe.contentDocument || iframe.contentWindow?.document;
+      if (!doc) return false; // not ready yet / cross-origin
+      const ro = new ResizeObserver(() => {
+        const b = doc.body;
+        const e = doc.documentElement;
+        const h = Math.max(
+          b.scrollHeight,
+          b.offsetHeight,
+          e.clientHeight,
+          e.scrollHeight,
+          e.offsetHeight
+        );
+        setH(h);
+      });
+      ro.observe(doc.documentElement);
+      ro.observe(doc.body);
+      const kick = () => {
+        const b = doc.body;
+        const e = doc.documentElement;
+        const h = Math.max(
+          b.scrollHeight,
+          b.offsetHeight,
+          e.clientHeight,
+          e.scrollHeight,
+          e.offsetHeight
+        );
+        setH(h);
+      };
+      iframe.addEventListener("load", kick, { once: true });
+      kick();
+      window.addEventListener("resize", kick);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+  function wireCrossOriginMessaging() {
+    window.addEventListener("message", (event) => {
+      const data = event.data;
+      if (!data || typeof data !== "object") return;
+      if (data.type === "wikiphone:height" && typeof data.height === "number") {
+        setH(data.height);
+      }
+    });
+    const pingChild = () => {
+      iframe.contentWindow?.postMessage({ type: "wikiphone:getHeight" }, "*");
+    };
+    iframe.addEventListener("load", () => {
+      setH(400); // give it a starter height so page isn’t tiny
+      let count = 0;
+      const t = setInterval(() => {
+        pingChild();
+        if (++count >= 10) clearInterval(t);
+      }, 500);
+    });
+  }
+  const wired = trySameOriginWiring();
+  if (!wired) wireCrossOriginMessaging();
 });