无法在 iframe 中创建 div答案

【问题标题】：Unable to create a div inside iframe无法在 iframe 中创建 div
【发布时间】：2022-01-05 15:59:39
【问题描述】：

我有一个iframe，我想使用 JavaScript 添加一个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>
      let myiframe = document.getElementById("zzz").contentWindow.document;
      let mydiv = myiframe.createElement("div");
      mydiv.style.background = "red";
      mydiv.style.width = "300px";

      myiframe.body.appendChild(mydiv);
    </script>

  </body>
</html>

我正在使用 VSCode 实时服务器扩展在我的本地服务器上运行它，我也在 w3schools tryit 编辑器上运行它：

看，这里没有红色 div！

编辑 1：

好的，我也检查了 DOM。还是什么都没有……

【问题讨论】：

<div> 的高度为零，因此不可见。代码工作正常。你如何确定<div> 是否被插入？
我也添加了样式来添加高度。它仍然无法正常工作！ @塞巴斯蒂安西蒙
Edit 发布并创建一个minimal reproducible example。描述这段代码的具体运行位置。本地（file: 协议）还是服务器？哪个服务器？ HTTPS与否？ IDE？哪一个？您在 IDE 中的哪个位置执行代码？等等。它对我来说很好。
刚刚做到了@SebastianSimon
如果你使用加载事件jsfiddle.net/mplungjan/ju8t6xoq就可以工作

标签： javascript html iframe

【解决方案1】：

Chrome 喜欢加载事件 - 我们也可以使用 document.getElementById("zzz").contentDocument;

https://jsfiddle.net/mplungjan/ju8t6xoq/

Stacksn-ps 将不允许访问 iFrame

window.addEventListener("load", function() {
  let myiframeDocument = document.getElementById("zzz").contentDocument;
  let mydiv = myiframeDocument.createElement("div");
  mydiv.style.background = "red";
  mydiv.style.width = "300px";
  mydiv.style.height = "300px";
  mydiv.textContent = 'bla'

  myiframeDocument.body.appendChild(mydiv);
});

【讨论】：