Question

打开网站时，我希望iframe立即运行已经放入（<p>hello</p>）中的代码。

但是代码没有被执行，我必须在运行之前放置一个空格或做一些事情。

如果无法正常工作，则run按钮也将起作用。

function compile() {
  var html = document.getElementById("html");
  var code = document.getElementById("code").contentWindow.document;

  document.body.onkeyup = function() {
    code.open();
    code.writeln(
      html.value
    );
    code.close();
  };
}

compile();

#html {
  width: 95em;
}

textarea {
  width: 32%;
  float: top;
  min-height: 250px;
  overflow: scroll;
  margin: auto;
  display: inline-block;
  background: #f4f4f9;
  outline: none;
  font-family: Courier, sans-serif;
  font-size: 14px;
}

iframe {
  bottom: 0;
  position: relative;
  width: 100%;
  height: 35em;
}

<html>

<head>
  <title>Code Editor</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <textarea id="html">&lt;p&gt;hello&lt;/p&gt;</textarea>
  <iframe id="code"></iframe>
  <script type="text/javascript" src="main.js"></script>
</body>

</html>

Answer 1

写入iframe的代码在onkeyup事件中。在按下并释放键之前，不会写入任何内容。要解决您的问题，只需在调用compile函数时在onkeyup事件外部写入iframe，如下例所示。

function compile() {
    var html = document.getElementById("html");
    var code = document.getElementById("code").contentWindow.document;

    code.open();
    code.writeln(html.value);
    code.close();

    document.body.onkeyup = function() {
        code.open();
        code.writeln(html.value);
        code.close();
   };
}

compile();

Answer 2

您必须更改功能，使其显示为.onload而不是.onkeyup，像这样：

function compile() {
    var html = document.getElementById("html");
    var code = document.getElementById("code").contentWindow.document;

    document.body.onload = function() {
        code.open();
        code.writeln(
            html.value
        );
        code.close();
    };
}

compile();

您还可以添加另一个名称不同的第二个函数，该函数的功能与原始函数相同，因此当您更改代码时它仍会更改：

function change() {
    var html = document.getElementById("html");
    var code = document.getElementById("code").contentWindow.document;

    document.body.onkeyup = function() {
        code.open();
        code.writeln(
            html.value
        );
        code.close();
    };
}

change();

网站启动后，使iframe立即运行

2 个答案: