window.postmessage在不安置的情况下无法工作

Question

我有iframe在通过JS Postmessage API接收数据后加载CDN模板，

<iframe  ref={elemRef} style={{position: 'relative', height: '90vh', width: '100%'}} id={'myIframe'} src='https://d3hs63jqljnhg.cloudfront.net/sample3.html' frameBorder="0"></iframe>


  const elemRef = useCallback((node) => {
    if (node !== null) {
      setTimeout(() => {
        node.contentWindow.postMessage({call:'sendValue', value: {task: {input: taskInput}}});
      }, 500);
    }

如果我删除settimeout，它不会发布任何消息。我想知道为什么在React上，除非与SettiMeT一起使用，否则window.postmessage（）不起作用。控制台中根本没有错误，但必须延迟约500个才能工作。

我还尝试了使用postmessage使用效果中的API，但是当它控制时，我仍然可以看到框架，但是我看不到postmessage被触发的

  const isIFrame = (input: HTMLElement | null): input is HTMLIFrameElement =>
    input !== null && input.tagName === 'IFRAME';

  useEffect(() => {
    const iFrame = document.getElementById('myFrame')
    console.log("iframeeeee",iFrame)
    if(isIFrame(iFrame) && iFrame && iFrame.contentWindow){
      iFrame.contentWindow.postMessage({call:'sendValue', value: {task: {input: taskInput}}}, 'https://d3hs63jqljnhg.cloudfront.net/sample3.html');
    }
  })

  useEffect(() => {
    const iFrame = document.getElementById('myFrame')
    console.log("iframeeeee",iFrame)
    if(isIFrame(iFrame) && iFrame && iFrame.contentWindow){
      iFrame.contentWindow.postMessage({call:'sendValue', value: {task: {input: taskInput}}}, 'https://d3hs63jqljnhg.cloudfront.net/sample3.html');
    }
  }, [])

人可以解释一下吗？我更喜欢避免使用Settimeout，因为感觉不可靠。

Answer 1

如@Kaiido所述，iframe的Onload功能确实有困难。我的反应代码的一部分看起来如下：

<iframe  ref={elemRef} src='https://d34gxw3jqljnhg.cloudfront.net/sample3.html' frameBorder="0"></iframe>
 
const elemRef = useCallback((node) => {
    if (node !== null) {
        node.onload = () => node?.contentWindow?.postMessage({call:'sendValue', value: {task: {input: taskInput}}}, 'https://d3hs63jqljnhg.cloudfront.net/sample3.html');
    }
}, [])