实现一个在线编辑html,css,js代码的功能

编程界的不良人

于 2024-05-29 19:50:33 发布

阅读量955

点赞数 31

分类专栏：实用方法文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_72015462/article/details/139304312

版权

实用方法专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现一个在线编辑html,css,js代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online HTML/CSS/JS Editor</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            height: 100vh;
            margin: 0;
        }

        .editor-container {
            display: flex;
            flex: 1;
            padding: 10px;
        }

        .editor {
            flex: 1;
            margin: 5px;
            display: flex;
            flex-direction: column;
        }

        textarea {
            flex: 1;
            padding: 10px;
            font-family: monospace;
            font-size: 14px;
            resize: none;
        }

        #result {
            flex: 1;
            margin: 5px;
            border: 1px solid #ccc;
            overflow: auto;
            /* 添加滚动条以便显示输出 */
        }

        .header {
            padding: 10px;
            background: #f1f1f1;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="header">
        <button id="runButton">Run</button>
    </div>
    <div class="editor-container">
        <div class="editor">
            <h3>HTML</h3>
            <textarea id="htmlCode"><h1 id="text">Hello, World!</h1></textarea>
        </div>
        <div class="editor">
            <h3>CSS</h3>
            <textarea id="cssCode">h1 { color: blue; }</textarea>
        </div>
        <div class="editor">
            <h3>JavaScript</h3>
            <textarea id="jsCode">
                console.log('Hello, World from iframe!');
            </textarea>
        </div>
        <iframe id="result"></iframe>
    </div>

    <script>
        const runCode = () => {
            try {
                const htmlCode = document.getElementById('htmlCode').value;
                const cssCode = document.getElementById('cssCode').value;
                let jsCode = document.getElementById('jsCode').value;
                jsCode = jsCode.replace(/console\.log\((.*?)\);?/g, "window.parent.displayOutput($1);");

                const resultFrame = document.getElementById('result');
                let iframeDoc = resultFrame.contentDocument || resultFrame.contentWindow.document;

                iframeDoc.head.innerHTML = `<style>${cssCode}</style>`;
                iframeDoc.body.innerHTML = htmlCode;
                const script = iframeDoc.createElement('script');
                script.textContent = jsCode
                iframeDoc.body.appendChild(script);
            } catch (error) {
                console.error("Error:", error);
            }
        };

        document.getElementById('runButton').addEventListener('click', runCode);

        // 在父窗口中显示输出的函数
        function displayOutput(output) {
            const outputArea = document.getElementById('output');
            outputArea.textContent += output + '\n';
        }
    </script>
    <!-- 显示输出的区域 -->
    <div class="header">
        <h3>Output</h3>
    </div>
    <div id="output" style="overflow: auto; height: 100px;"></div>
</body>

</html>