大家好，欢迎来到IT知识分享网。
实现一个在线编辑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> 免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/156250.html
