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

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

运行js的页面代码如下

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的代码如下(点击运行右侧会出现网页效果,点击在新页面打开会打开新网页显示页面)

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>

效果图

相关推荐
Monly2116 小时前
Vue:下拉框多选影响行高
前端·javascript·vue.js
是罐装可乐16 小时前
前端架构知识体系:Source Map 的用法和全面解析
前端·映射·前端架构·代码安全·源码地图·source-map
小桥风满袖16 小时前
极简三分钟ES6 - ES8中对象扩展
前端·javascript
代码的余温16 小时前
Web服务器VS应用服务器:核心差异解析
运维·服务器·前端
一涯16 小时前
日常小常识记录
前端
那一抹阳光多灿烂16 小时前
CSS 编码规范
前端·css
degree52016 小时前
CSS :has() 选择器详解:为什么它是“父选择器”?如何实现真正的容器查询?
前端·css·css3
૮・ﻌ・16 小时前
CSS高级技巧---精灵图、字体图标、布局技巧
前端·css
昔人'16 小时前
纯`css`固定标题并在滚动时为其添加动画
前端·css
超人不会飛16 小时前
Vue markdown组件 | 流式 | 大模型应用
前端·javascript·github