Propagate zoom factor in the top window into iframe through postMessage

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Changed
+
+- Propagate zoom factor in the top window into `<iframe>` through `postMessage` ([#24](https://github.com/marp-team/marpit-svg-polyfill/pull/24))
+
 ## v1.4.0 - 2020-07-09
 
 ### Fixed

src/polyfill.ts

@@ -1,4 +1,5 @@
 export const observerSymbol = Symbol()
+export const zoomFactorRecieverSymbol = Symbol()
 
 export function observe() {
   if (window[observerSymbol]) return
@@ -22,9 +23,44 @@ export function observe() {
 export const polyfills = () =>
   navigator.vendor === 'Apple Computer, Inc.' ? [webkit] : []
 
-let previousZoomFactor: number | undefined = undefined
+let previousZoomFactor: number
+let zoomFactorFromParent: number | undefined
+
+// tslint:disable-next-line: variable-name
+export const _resetCachedZoomFactor = () => {
+  previousZoomFactor = 1
+  zoomFactorFromParent = undefined
+}
+
+_resetCachedZoomFactor()
 
 export function webkit(zoom?: number) {
+  if (!window[zoomFactorRecieverSymbol]) {
+    Object.defineProperty(window, zoomFactorRecieverSymbol, {
+      configurable: true,
+      value: true,
+    })
+
+    window.addEventListener('message', ({ data, origin }) => {
+      if (origin !== window.origin) return
+
+      try {
+        if (
+          data &&
+          typeof data === 'string' &&
+          data.startsWith('marpitSVGPolyfill:setZoomFactor,')
+        ) {
+          const [_, value] = data.split(',')
+          const parsed = Number.parseFloat(value)
+
+          if (!Number.isNaN(parsed)) zoomFactorFromParent = parsed
+        }
+      } catch (e) {
+        console.error(e)
+      }
+    })
+  }
+
   let changedZoomFactor: false | number = false
 
   Array.from(
@@ -36,12 +72,7 @@ export function webkit(zoom?: number) {
       // NOTE: Safari reflects a zoom level to SVG's currentScale property, but
       // the other browsers will always return 1. You have to specify the zoom
       // factor manually if used in outdated Blink engine. (e.g. Electron)
-      const zoomFactor =
-        zoom ||
-        (window !== window.parent &&
-          window.parent['marpitSVGPolyfillZoomFactor']) ||
-        svg.currentScale ||
-        1
+      const zoomFactor = zoom || zoomFactorFromParent || svg.currentScale || 1
 
       if (previousZoomFactor !== zoomFactor) {
         previousZoomFactor = zoomFactor
@@ -64,9 +95,14 @@ export function webkit(zoom?: number) {
   )
 
   if (changedZoomFactor !== false) {
-    Object.defineProperty(window, 'marpitSVGPolyfillZoomFactor', {
-      configurable: true,
-      value: changedZoomFactor,
-    })
+    Array.from(
+      document.querySelectorAll<HTMLIFrameElement>('iframe'),
+      ({ contentWindow }) => {
+        contentWindow?.postMessage(
+          `marpitSVGPolyfill:setZoomFactor,${changedZoomFactor}`,
+          window.origin === 'null' ? '*' : window.origin
+        )
+      }
+    )
   }
 }

test/polyfill.ts

@@ -1,11 +1,17 @@
 import { Marpit } from '@marp-team/marpit'
-import { observe, observerSymbol, webkit } from '../src/polyfill'
+import {
+  _resetCachedZoomFactor,
+  observe,
+  observerSymbol,
+  webkit,
+} from '../src/polyfill'
 
 let vendor: jest.SpyInstance
 
 beforeEach(() => {
   window[observerSymbol] = false
   vendor = jest.spyOn(navigator, 'vendor', 'get').mockImplementation(() => '')
+  _resetCachedZoomFactor()
 })
 
 describe('Marpit SVG polyfill', () => {
@@ -85,18 +91,39 @@ describe('Marpit SVG polyfill', () => {
       )
     })
 
-    it('prefers the zoom factor defined in parent.marpitSVGPolyfillZoomFactor', () => {
-      expect.hasAssertions()
-
-      jest.spyOn(window, 'parent', 'get').mockImplementation((): any => ({
-        marpitSVGPolyfillZoomFactor: 2,
-      }))
+    it('prefers the zoom factor that received in specific protocol', () => {
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: 'marpitSVGPolyfill:setZoomFactor,2',
+          origin: window.origin,
+        })
+      )
 
       webkit()
 
       Array.from(document.getElementsByTagName('section'), ({ style }) =>
         expect(style.transform).toContain('scale(1)')
       )
     })
+
+    it('sends message into children iframes when the zoom factor had changed', () => {
+      const iframe = document.createElement('iframe')
+      document.body.appendChild(iframe)
+
+      const spy = jest.spyOn<any, any>(iframe.contentWindow, 'postMessage')
+
+      webkit()
+      expect(spy).not.toBeCalled()
+
+      Array.from(document.querySelectorAll('svg'), (svg) => {
+        svg.currentScale = 2.5
+      })
+
+      webkit()
+      expect(spy).toBeCalledWith(
+        'marpitSVGPolyfill:setZoomFactor,2.5',
+        window.origin
+      )
+    })
   })
 })