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

萧寂173

已于 2024-04-10 00:22:02 修改

阅读量988

点赞数 23

分类专栏： js 文章标签： javascript html 前端

于 2024-04-08 17:23:10 首次发布

本文链接：https://blog.csdn.net/weixin_68658847/article/details/137516755

版权

js 专栏收录该内容

59 篇文章 4 订阅

订阅专栏

闲来无事,写俩页面巩固学习知识
此项目已部署,访问地址如下:
https://jinweizhe.netlify.app/

运行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;

      // 清空结果区域
      document.getElementById("result").innerText = "";

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

      // 重写 console.log 方法，将输出重定向到结果区域
      console.log = function(...args) {
        oldConsoleLog(...args); // 保留原始输出
        var formattedArgs = args.map(arg => {
          if (typeof arg === 'object') {
            return JSON.stringify(arg); // 如果是对象或数组，则转换为字符串
          } else {
            return arg;
          }
        });
        document.getElementById("result").innerText += formattedArgs.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">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;HTML Code Editor&lt;/title&gt;
&lt;style&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id="container"&gt;
    
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</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>