自定义HTML/CSS/JS代码编辑器无法加载JavaScript，寻求替代eval函数的解决方案

嘿，我来帮你搞定这个问题！你说得没错，eval确实会因为浏览器的CSP（内容安全策略）限制被拦截，而且你的代码执行逻辑还有几个小问题，导致外部脚本（比如Bootstrap依赖的jQuery、Popper.js）没法正确加载运行。我给你拆解下问题，再提供几个靠谱的替代方案：

先说说你现有代码的核心问题 #

1. innerHTML插入脚本不生效：你把HTML代码通过body.innerHTML插入，但浏览器对通过这种方式添加的<script>标签（不管是内联还是外部CDN的），都不会自动执行——这就是Bootstrap的下拉按钮没反应的直接原因之一。
2. eval的安全与CSP限制：eval会把代码放在全局作用域执行，不仅有变量污染风险，更关键的是很多网站的CSP规则会直接禁止eval这类危险的代码执行方式。
3. 执行顺序逻辑混乱：你先eval了HTML代码（这步完全没必要），又覆盖了body内容，最后才evalJS，整个流程绕了弯路还没起作用。

替代方案一：用Blob + iframe src 构建完整文档（最推荐） #

这种方式相当于让iframe加载一个独立的完整HTML页面，浏览器会像解析普通网页一样处理所有资源（包括外部脚本、样式），完全避开eval的问题，兼容性也好。

修改你的代码成这样：

const html_code = document.querySelector('.html-code textarea');
const css_code = document.querySelector('.css-code textarea');
const js_code = document.querySelector('.js-code textarea');
const result = document.querySelector('#result');

function run() {
    // 保存代码到localStorage
    localStorage.setItem('html_code', html_code.value);
    localStorage.setItem('css_code', css_code.value);
    localStorage.setItem('js_code', js_code.value);

    // 拼接完整的HTML文档：用户的HTML + 自定义CSS + 自定义JS
    const fullDocument = `
        ${localStorage.html_code}
        <style>${localStorage.css_code}</style>
        <script>${localStorage.js_code}<\/script>
    `;

    // 用Blob生成可访问的文档URL
    const blob = new Blob([fullDocument], { type: 'text/html' });
    const docUrl = URL.createObjectURL(blob);

    // 让iframe加载这个文档
    result.src = docUrl;

    // 文档加载完成后释放Blob URL，避免内存泄漏
    result.onload = () => {
        URL.revokeObjectURL(docUrl);
    };
}

// 监听所有输入操作（包括粘贴、拖拽）
html_code.addEventListener('input', run);
css_code.addEventListener('input', run);
js_code.addEventListener('input', run);

// 页面初始化时恢复之前保存的代码
window.addEventListener('load', () => {
    html_code.value = localStorage.getItem('html_code') || '';
    css_code.value = localStorage.getItem('css_code') || '';
    js_code.value = localStorage.getItem('js_code') || '';
    run();
});

这个方案的优势：

• 完全告别eval，彻底解决CSP限制问题
• 浏览器会正常解析HTML里的所有外部资源（比如你示例里的Bootstrap CDN脚本），下拉按钮能直接正常工作
• 代码运行在iframe的独立作用域里，不会和主页面的变量、逻辑冲突

替代方案二：动态创建脚本元素替代eval（适合轻量场景） #

如果你不想每次都重新加载iframe，也可以用创建<script>标签的方式替代eval，同时修复HTML的解析逻辑：

const html_code = document.querySelector('.html-code textarea');
const css_code = document.querySelector('.css-code textarea');
const js_code = document.querySelector('.js-code textarea');
const result = document.querySelector('#result');

function run() {
    localStorage.setItem('html_code', html_code.value);
    localStorage.setItem('css_code', css_code.value);
    localStorage.setItem('js_code', js_code.value);

    const iframeWin = result.contentWindow;
    const iframeDoc = iframeWin.document;

    // 用document.write重置iframe内容，浏览器会正常解析所有脚本
    iframeDoc.open();
    iframeDoc.write(localStorage.html_code);
    iframeDoc.close();

    // 插入自定义CSS
    const styleTag = iframeDoc.createElement('style');
    styleTag.textContent = localStorage.css_code;
    iframeDoc.head.appendChild(styleTag);

    // 用script标签替代eval执行自定义JS
    const scriptTag = iframeDoc.createElement('script');
    scriptTag.textContent = localStorage.js_code;
    iframeDoc.head.appendChild(scriptTag);
}

// 监听输入事件
html_code.addEventListener('input', run);
css_code.addEventListener('input', run);
js_code.addEventListener('input', run);

// 初始化恢复代码
window.addEventListener('load', () => {
    html_code.value = localStorage.getItem('html_code') || '';
    css_code.value = localStorage.getItem('css_code') || '';
    js_code.value = localStorage.getItem('js_code') || '';
    run();
});

这个方案的关键点：

• 用document.open()/write()/close()替代innerHTML，这样浏览器会像加载普通网页一样解析HTML里的所有脚本（包括外部CDN的）
• 用动态创建的<script>标签执行JS代码，完全符合浏览器的安全规范，不会触发CSP对eval的限制

额外小提示 #

如果你的页面有严格的CSP规则，可能需要给iframe添加sandbox属性并开启必要权限，比如：

<iframe id="result" sandbox="allow-scripts allow-same-origin"></iframe>

allow-scripts允许iframe执行脚本，allow-same-origin让iframe能访问主页面的localStorage（方便你保存用户的代码）。

备注：内容来源于stack exchange，提问作者Cliff Odebala Clarke