Iframe组件信息通信方案

外部父组件通知子组件Iframe

父组件

    const event = new CustomEvent('sendToIframe', { detail: 'Hello from iframe' });

    const canvasWindow = document.getElementById('#iframe的ID').contentWindow

    canvasWindow.dispatchEvent(event);

Iframe中

    window.addEventListener('sendToIframe', e => {

      console.log('收到来自外部的参数', e)

    })

子组件Iframe通知外部

父组件

    window.addEventListener('sendToParent', e => {

       console.log('收到来Iframe的参数', e)

    })

Iframe中

   const event = new CustomEvent('sendToParent', { detail: 'Hello from Parent' });

    window.parent.dispatchEvent(event);