iframe事件冒泡的问题

iframe事件冒泡的问题

在react中遇到了遇到一个问题，导致的原因就是：iframe的事件只能冒泡到iframe下的window，不能冒泡到父页面的window。

实现思路：通过监听iframe的点击事件，使用js实现自动点击button，来收起popover。（存在问题：iframe跨域）

在本地开发时，只能把项目跑在本地的不同端口上，所以是跨域的，线上环境不跨域。（如果想要实现本地模拟正式线上环境，需要本地启动nginx服务器代理到相同端口下）

方法1：domain

因为此时两个页面的主域都是example.com，所以在两个页面中都使用document.domain='example.com'设置下主域相同，设置了之后就不会有上面的报错（虽然线上环境不跨域，但是想要iframe之间进行通信，还是必须要使用document.domain设置下）

方法2：postMessage

父页面：

<iframe
    ref={iframeRef}
    src={url}
    onLoad={iframeLoad}
    style={{ width: '100%', height: '99%', border: 'none' }}
    />

//监听message事件，获取iframe发来的消息
 useEventListener('message', e => {
    const message = e.data.message
    //当查看当前账号的pop打开时，点击iframe内容，也可关闭pop
    if (message?.click) {
      //找到触发按钮，并模拟点击，触发收起popover
      const HeaderSickNamePop = document.getElementsByClassName(
        'antd-pro-layouts-header-account-account ant-popover-open'
      )[0]
      if (HeaderSickNamePop) {
        HeaderSickNamePop.click()
      }
    }
  })

iframe页面：

useEffect(() => {
    const clickCallback = () => {
        window.parent.postMessage(
            {
                message: { click: true },
            },
            '*'
        )
    }
    window.addEventListener('click', clickCallback)
    return () => {
        window.removeEventListener('click', clickCallback)
    }
}, [])
//进入页面的时候将在iframe的window下全局监听点击事件，并向父页面发消息