React 和 Javascript 中的两个 IFrame 之间的通信

Question

我有 3 个单独的部分。 我有IFrameOne ， Main Page ， ModalIFrame

主页是我放置两个 iframe（IFrameOne 和 ModalIFrame）的地方。 我需要将数据从IFrameOne传递到ModalIFrame 。 目前它很好，它打开ModalIFrame并从IFrameOne接收数据。

我现在的问题是我正在为ModalIFrame使用可见性：隐藏，因为如果我只依赖display: none -> display: block ，当我通过单击IFrameOne上的按钮打开它时它会重新呈现模态并且数据可以' t 显示在ModalIFrame上。 所以我使用display: block always 解决了它，只是使用hidden:visibility隐藏/显示模态，这不好。 那么我该如何解决呢？

简而言之：我想使用display: block和display: none来隐藏/显示模式而不是visibility:hidden和visibility: visible 。 但是使用display的问题是，当我显示它时，我看不到从 iframeOne 传递到模态 iframe 的数据，因为它有点重新渲染/重新加载页面

IFrameOne

const IFrameOne = () => {

  const handleClickOpen = (data) => {
    parent.postMessage(
      {
        type: "openModalIFrame",
        value: {
          visibility: `visible`,
          data,
        },
      },
      "*"
    );
  };

  return (
    <Button
      onClick={() => handleClickOpen("test data")}
    >
      Open Modal Iframe
    </Button>
  );
};
export default IFrameOne;

主页

<div class="iframeOneContainer">
    <iframe id="iFrameOne" loading="lazy" width="100%" height="100%" style="border: none" />
</div>
<div class="modalIFrameContainer">
  <div class="modalIFrameContent">
    <iframe id="modalIFrame" loading="lazy"  width="100%" height="100%" style="border: none" />
  </div>
</div>
      
<script style="display:none;">
    const iFrameOne = document.getElementById("iFrameOne")
    const modalIFrame = document.getElementById("modalIFrame")
    const iFrameOneURL = "https://iframe-one.com"
    const modalURL = "https://modal-iframe.com"

  function setupIFrames() {
    if (iFrameOne) iFrameOne.src = iFrameOneURL
    if (modalIFrame) modalIFrame.src = modalURL
  } 
      
      
  function openModalIFrame(value) {
    if (modalIFrame) {
      modalIFrame.contentWindow.postMessage(
        {
          type: "setModalData",
          value: {
            data: value?.data,
          },
        },
        "*"
      )
      document.querySelector(".modalIFrameContainer").style.visibility = value.visibility
    }
  }

  function iframeMessageListener(msg) {
    if (msg.data.type === "openModalIFrame") {
      openModalIFrame(msg.data.value)
    }
  }

  $(document).ready(function () {
    setupIFrames()
    window.addEventListener('message', iframeMessageListener)
  });   
</script>
<style>
  .iframeOneContainer {
    display: block;
    width: 100%;
  }
  .modalIFrameContainer {
    visibility: hidden;
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  }
  .modalIFrameContent {
    background-color: transparent;
    margin: auto;
    width: 100%;
    height: 100%;
  }
</style>

模态框架

const ModalIFrame = () => {
  const handleClose = () => {
    parent.postMessage(
      {
        type: "openModalIFrame",
        value: {
          visibility: `hidden`,
        },
      },
      "*"
    );
  };

  useEffect(() => {
    window.addEventListener("message", iframeMessageListener);

    return () => window.removeEventListener("message", iframeMessageListener);
  }, []);

  const iframeMessageListener = (msg) => {
    if (msg.data.type === "setModalData") {
      setData(msg.data.value?.data);
    }
  };

  return (
    <Box
    >
      <Dialog>
        <Button onClick={handleClose}>close modal</Button>
        <div>{data}</div>
      </Dialog>
    </Box>
  );
};

export default ModalIFrame;