网页运行js和html代码的html代码

闲来无事,写俩页面巩固学习知识

运行js的页面代码如下

<!DOCTYPE html>
<html>
<head>
  <title>JS Code Runner</title>
  <style>
    #container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    #code-input {
      width: 45%;
      height: 400px;
    }

    #run-button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    #result {
      width: 45%;
      height: 400px;
      background-color: #f1f1f1;
      padding: 10px;
      white-space: pre-wrap;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div id="container">
    <textarea id="code-input" placeholder="在这里输入JS代码"></textarea>
    <button id="run-button">运行</button>
    <pre id="result"></pre>
  </div>

  <script>
    document.getElementById("run-button").addEventListener("click", function() {
      var code = document.getElementById("code-input").value;
      var result = "";

      // 保存原始的 console.log 方法
      var oldConsoleLog = console.log;

      // 重写 console.log 方法，将输出重定向到结果区域
      console.log = function(...args) {
        oldConsoleLog(...args); // 保留原始输出
        document.getElementById("result").innerText += args.join(" ") + "\n"; // 将输出添加到结果区域
      };

      try {
        // 使用 eval 执行代码
        eval(code);
      } catch (error) {
        // 捕获执行错误并显示在结果区域
        document.getElementById("result").innerText += error.toString() + "\n";
      }

      // 恢复原始的 console.log 方法
      console.log = oldConsoleLog;
    });
  </script>
</body>
</html>

效果图

运行html的代码如下(点击运行右侧会出现网页效果,点击在新页面打开会打开新网页显示页面)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Code Editor</title>
<style>
  #editor-container {
    display: flex;
  }

  #html-input {
    width: 50%;
    height: 400px;
  }

  #preview {
    width: 50%;
    height: 400px;
    border: 1px solid #ccc;
    overflow: auto;
  }
</style>
</head>
<body>
  <div id="editor-container">
    <textarea id="html-input"></textarea>
    <iframe id="preview"></iframe>
  </div>

  <button id="run-button">运行</button>
  <button id="open-button">在新页面中打开</button>

  <script>
    document.getElementById("run-button").addEventListener("click", function() {
      var htmlCode = document.getElementById("html-input").value; // 获取输入框中的HTML代码
      var previewFrame = document.getElementById("preview").contentWindow.document;

      previewFrame.open();
      previewFrame.write(htmlCode); // 在iframe中写入HTML代码
      previewFrame.close();
    });

    document.getElementById("open-button").addEventListener("click", function() {
      var htmlCode = document.getElementById("html-input").value; // 获取输入框中的HTML代码
      var newWindow = window.open(); // 在新窗口中打开

      newWindow.document.open();
      newWindow.document.write(htmlCode); // 在新窗口中写入HTML代码
      newWindow.document.close();
    });
  </script>
</body>
</html>

效果图