无法在 iframe 中创建 div

Question

我有一个 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。这里还是什么都没有...

Answer 1

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

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

Stacksnippets 将不允许访问 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);
});

无法在 iframe 中创建 div

Unable to create a div inside iframe

html

javascript

iframe