我正在创建一个需要实时编辑代码（Java、c、python、javascript 等）的网站。我知道 codemirror，我想知道如何在网站上运行代码（例如 W3Schools 自己尝试功能）并在本地运行，而不需要服务器基础设施
对于前端，很容易在 Stack Exchange 上模拟 Stack Snippets 的工作原理。总体思路是为不同部分（HTML/JS/CSS）创建文本区域，然后当您想要渲染它时，创建一个 iframe，其内容是通过插入文本区域值来创建的：
const [button, html, css, javascript, iframe] = document.querySelectorAll('button, textarea, iframe');
button.addEventListener('click', () => {
const fullHTML = `
<!doctype html><html>
<head><style>${css.value}</style></head>
<body>${html.value}<script>${javascript.value}<\/script></body>
</html>`;
iframe.src = 'data:text/html,' + encodeURIComponent(fullHTML);
});
textarea {
display: block;
}
<button>Run</button>
<textarea><span id="span">a span</span></textarea>
<textarea>span { color: green; }</textarea>
<textarea>span.onclick = () => span.style.color = 'yellow';</textarea>
<iframe sandbox="allow-scripts"></iframe>
以上内容改编自以 Kaiido 为例在元上。
这并不完全是 Stack Snippets 的工作方式 - 它们确实需要后端来获取表单值并构建浏览器看到的 HTML 响应 - 但它非常相似。
对于前端以外的任何东西，它要复杂得多 - 您必须检索用户编写的源文本，向服务器发送请求以正确的语言运行它，然后将请求发送回客户端并渲染它。对于浏览器无法本机运行的任何内容，没有办法绕过“服务器基础设施”来处理和运行代码。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
