使用JavaScript在iframe中添加div不显示的问题求助

问题原因 #

• 外层页面的JS执行时机早于iframe的加载完成时机，此时iframe的内部DOM还未初始化完成，对contentWindow.document的操作会直接失效
• 你创建的div仅设置了宽度，未设置高度，默认高度为0，即便插入成功也无法看到红色区块

修复方案 #

监听iframe的load事件，等iframe内部内容加载完成后再执行DOM操作，同时给div增加高度设置，修正后的代码如下：

<html>
  <body>

      <iframe
        id="zzz"
        srcdoc="<html><h1>hello</h1><button>click </button> <button>btn 2</button></html>"
        width="500"
        height="500">
      </iframe>

    <script>
      const myIframe = document.getElementById("zzz");
      // 等iframe加载完成再操作内部DOM
      myIframe.addEventListener('load', () => {
        const iframeDoc = myIframe.contentWindow.document;
        const mydiv = iframeDoc.createElement("div");
        mydiv.style.background = "red";
        mydiv.style.width = "300px";
        mydiv.style.height = "300px"; // 新增高度设置
        iframeDoc.body.appendChild(mydiv);
      })
    </script>

  </body>
</html>

内容的提问来源于stack exchange，提问作者Abhay Salvi