AJAX加载PHP文件中script标签无法执行问题排查与解决

原因分析 #

• innerHTML的安全限制：浏览器出于安全防护，通过innerHTML插入的<script>标签不会自动执行，这是内置的防脚本注入机制，所以effect0.php里的脚本即便被插入到容器中，也不会触发执行。
• 脚本语法错误：effect0.php中的alert(test-alert)存在语法问题——test-alert未用引号包裹，会被JavaScript解析为test变量减alert变量，而这两个变量都未定义，就算脚本能执行也会抛出错误。

解决方法 #

步骤1：修复脚本语法错误 #

修改effect0.php中的alert语句，将字符串用引号包裹：

<p>test</p>
<script type="text/javascript">
    alert("test-alert");
</script>

步骤2：处理innerHTML不执行脚本的问题 #

浏览器不会自动执行innerHTML插入的脚本，需要手动提取脚本内容并创建新的script元素触发执行，修改主文件中的updateEffectContainer函数：

function updateEffectContainer(effect) {
    const filename = 'effect' + effect + '.php';

    fetch(filename)
        .then(response => response.text())
        .then(html => {
            const container = document.getElementById("effect-container");
            container.innerHTML = html;
            // 提取容器内的脚本并执行
            const scripts = container.querySelectorAll('script');
            scripts.forEach(oldScript => {
                const newScript = document.createElement('script');
                // 复制原脚本的属性（比如type）
                Array.from(oldScript.attributes).forEach(attr => {
                    newScript.setAttribute(attr.name, attr.value);
                });
                // 复制脚本内容
                newScript.textContent = oldScript.textContent;
                // 替换旧脚本，触发执行
                oldScript.parentNode.replaceChild(newScript, oldScript);
            });
        })
        .catch(error => {
            console.error('Error:', error);
        });
}

备选方法（不推荐）：使用eval执行脚本 #

如果加载的内容完全可信，也可以直接提取脚本文本用eval执行，但这种方式存在安全风险，容易被注入恶意代码，不建议在生产环境使用：

// 在innerHTML设置后添加：
const scriptText = container.querySelector('script').textContent;
eval(scriptText);

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