网页运行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>

效果图

相关推荐
abigale031 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者1 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊2 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火2 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀6 小时前
html初学者第一天
前端·html
耶啵奶膘8 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家9 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能