XHR GET响应中的JavaScript在Chrome等非IE7浏览器无法执行的问题求助

我来帮你拆解下这个问题：为啥IE7能正常执行XHR返回的JS，Chrome等现代浏览器却不行？主要有两个核心原因，再给你几个可行的解决方案：

一、为啥现代浏览器不执行这些脚本？ #

1. 安全机制差异：IE7时代的浏览器对动态插入脚本的限制很宽松，直接通过innerHTML把带<script>的内容插入DOM就会自动执行脚本。但现在Chrome这类现代浏览器为了防范XSS攻击，默认不会执行通过innerHTML插入的脚本——这是浏览器安全机制进化的必然结果。
2. Dojo ContentPane的逻辑未生效：你虽然给ContentPane配置了executescripts: true，但并没有将ContentPane正确添加到DOM树中，而是直接提取contentPane.domNode.innerHTML传给对话框。ContentPane的脚本执行逻辑只有在它被完整渲染到DOM里时才会触发，直接拿innerHTML等于绕开了这个处理流程，脚本自然无法执行。

二、怎么解决这个问题？ #

方案1：正确利用Dojo ContentPane的渲染能力（最推荐） #

别再直接取innerHTML了，把ContentPane本身作为对话框的内容传入，让Dojo帮你处理渲染和脚本执行：

showRules: function() {
    showLoader();
    var contentPane = new dojox.layout.ContentPane({
        executescripts: true,
        scriptseparation: false,
        preventCache: true
    });
    dojo.xhrGet({
        url: "/RuleManagement/ShowRuleGrid?type=default",
        sync: true,
        handleAs: "text",
        preventCache: true,
        load: dojo.hitch(this, function(data) {
            contentPane.setContent(data);
            // 直接传入ContentPane实例，而非innerHTML
            fs.core.CreateAndShowDialogDynamic(null, contentPane, null, true, 750);
            hideLoader();
        }),
        error: dojo.hitch(this, function (error, args) {
            console.error("error: " + error.description);
            console.log("args: " + args.query);
            hideLoader();
        })
    });
}

这样Dojo会负责把ContentPane渲染到DOM中，并按照executescripts: true的配置自动执行返回的脚本，完美兼容现代浏览器。

方案2：手动提取并执行脚本（适合必须用innerHTML的场景） #

如果因为业务限制必须用innerHTML的方式，可以手动提取返回内容中的脚本，创建新的script标签执行：

load: dojo.hitch(this, function(data) {
    // 提取所有script标签内的代码
    const scriptRegex = /<script[^>]*>([\s\S]*?)<\/script>/gi;
    let match;
    const scriptContents = [];
    while ((match = scriptRegex.exec(data)) !== null) {
        scriptContents.push(match[1]);
    }
    // 移除HTML中的script标签，再传给对话框
    const cleanHtml = data.replace(scriptRegex, '');
    fs.core.CreateAndShowDialogDynamic(null, cleanHtml, null, true, 750);
    // 手动执行提取到的脚本
    scriptContents.forEach(code => {
        const scriptEl = document.createElement('script');
        scriptEl.textContent = code;
        document.body.appendChild(scriptEl);
        // 执行完毕后移除临时脚本标签
        document.body.removeChild(scriptEl);
    });
    hideLoader();
})

注意要确保DOM已准备就绪再执行脚本，比如你的dojo.addOnLoad逻辑在对话框创建完成后依然能正常触发。

方案3：分离数据与脚本（长远最优解） #

从代码维护和安全性考虑，最好的方式是把数据与脚本彻底分离：

• 让XHR接口只返回JSON格式的数据（比如网格配置、表格数据、按钮回调地址等）
• 前端提前编写好创建网格的脚本，拿到JSON数据后直接用数据初始化网格
  这样既避免了动态脚本执行的安全风险，代码结构也更清晰，后续需求变更也更易维护。

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