如何在无URL或文件的情况下向iframe传入代码并运行

1. 无需依赖文件/URL给iframe传入代码的实现方式 #

完全支持，不需要给iframe配置指向外部资源的src属性，有两种通用实现：

• 使用原生srcdoc属性，直接将完整HTML代码字符串赋值给iframe即可，现代浏览器全兼容，是目前最推荐的写法：

<!-- 先在页面放好iframe容器，加sandbox做权限隔离 -->
<iframe id="runtimeContainer" sandbox="allow-scripts allow-same-origin allow-popups"></iframe>
<script>
// 你自动生成的完整3D场景HTML代码，包含依赖引入、场景初始化逻辑
const generatedSceneCode = `<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>3D场景预览</title></head>
<body>
  <!-- 生成的3D逻辑全部放在这里 -->
</body>
</html>`

document.getElementById('runtimeContainer').srcdoc = generatedSceneCode
</script>

• 操作iframe的文档对象手动写入内容，适合需要动态追加代码、分步加载资源的场景：

const frame = document.getElementById('runtimeContainer')
const frameDoc = frame.contentDocument || frame.contentWindow.document
frameDoc.open()
frameDoc.write(generatedSceneCode)
frameDoc.close()

注意一定要给iframe加sandbox属性做权限管控，避免生成的代码误操作主编辑器页面，按需开放权限即可，不要直接给全权限。

2. 其他可替代的简便实现方案 #

除了iframe，还有两个适配不同场景的方案，比iframe更灵活：

• 新标签页运行：将生成的代码转为Blob URL后直接打开新标签页加载，完全不占用主编辑器的进程、GPU资源，特别适合3D场景这类性能消耗高的内容，不会导致编辑器卡顿：

// 把代码转成二进制Blob
const codeBlob = new Blob([generatedSceneCode], { type: 'text/html' })
// 生成临时可访问URL
const previewUrl = URL.createObjectURL(codeBlob)
// 开新标签打开
window.open(previewUrl, '_blank')
// 预览关闭后记得调用URL.revokeObjectURL(previewUrl)释放内存

• Shadow DOM轻量隔离：如果只需要隔离CSS样式，不需要做JS上下文隔离，可以在当前页面创建Shadow DOM容器挂载运行内容，比iframe通信成本低、加载更快。但这个方案下运行的JS和主编辑器同上下文，代码报错、全局变量污染会直接影响编辑器本身，复杂3D场景不推荐用。

3. 是否可以完全脱离服务端实现 #

100%可以，上面提到的所有方案都是纯前端能力，不需要任何后端接口、服务端托管支持。
纯前端实现需要注意几个细节：

• 如果生成的代码里引用了外部CDN依赖（比如Three.js、Babylon.js这类3D库，或者外部模型、贴图资源），只需要用户运行环境能访问对应CDN地址即可，不需要你自己的服务端做代理；如果要做完全离线可用，可以把依赖资源转成base64或者存在前端本地存储（IndexedDB、LocalStorage）里，注入到生成代码中即可。
• 权限配置注意平衡安全和可用性：如果给iframe配置sandbox时去掉allow-same-origin，iframe会被标记为非同源，内部代码完全无法操作主页面，安全性更高，但部分需要获取本地存储、画布权限的3D功能可能受限，按需调整即可。
• 大体积3D场景优先选新标签页方案，避免和编辑器抢主线程、WebGL上下文导致页面崩溃。

内容的提问来源于stack exchange，提问作者TheHaloDeveloper