通过JSON传递的HTML中<script>标签无法执行的解决方法问询

这个问题的核心在于浏览器的安全机制：当你通过innerHTML把HTML字符串插入到文档中时，其中的<script>标签不会被自动执行。而直接点击链接打开路由时，浏览器是完整加载并解析整个HTML文档，脚本会正常执行，这就是两种情况差异的原因。

下面给你几种可行的解决方案，按推荐程度排序：

方案1：直接让新窗口加载后端路由（最推荐） #

既然你的后端已经有返回HTML的接口，完全可以跳过AJAX步骤，直接让按钮点击后打开这个接口的URL，把参数通过URL传递过去。这样浏览器会像处理普通网页一样解析HTML，脚本自然会执行。

修改你的前端JavaScript代码：

$(document).ready(function() {
  $('#process_input').bind('click', function() {
    var someData = JSON.stringify('some data');
    // 编码参数后拼到URL里
    window.open('/_process_data?some_data=' + encodeURIComponent(someData), '_blank');
    return false;
  });
});

这个方法的好处是完全符合浏览器的正常加载流程，不需要额外处理脚本，代码也更简洁，后端代码不需要任何修改。

方案2：使用document.write插入HTML #

如果因为某些原因必须用AJAX获取HTML字符串，你可以用document.write来写入新窗口的文档，它会模拟浏览器解析HTML的过程，自动执行其中的脚本。

修改AJAX的success回调：

$.get('/_process_data', { some_data: JSON.stringify('some data'), }).success(function(data) {
  var win = window.open("", "_blank");
  // 用document.write写入完整HTML，然后关闭文档流
  win.document.write(data);
  win.document.close();
})

注意：document.write必须在新窗口的文档还未完成加载时调用，否则会清空现有文档内容。不过在这个场景下，刚打开的空白窗口肯定是未加载完成的，所以没问题。

方案3：手动提取并重新插入脚本 #

如果前两种方法都不适用，你可以手动提取插入后的HTML中的脚本标签，重新创建新的<script>元素并添加到文档中，触发浏览器执行脚本。

修改success回调：

$.get('/_process_data', { some_data: JSON.stringify('some data'), }).success(function(data) {
  var win = window.open("", "_blank");
  win.document.body.innerHTML = data;
  
  // 提取所有script标签并重新执行
  var existingScripts = win.document.body.getElementsByTagName('script');
  // 转成数组，避免动态集合遍历受删除操作影响
  var scriptsArray = Array.from(existingScripts);
  
  scriptsArray.forEach(function(script) {
    var newScript = win.document.createElement('script');
    // 处理外部脚本（带src属性）和内联脚本
    if (script.src) {
      newScript.src = script.src;
      newScript.onload = function() {
        console.log('External script loaded');
      };
    } else {
      newScript.textContent = script.textContent;
    }
    // 添加到文档中执行
    win.document.body.appendChild(newScript);
    // 移除原来的脚本标签
    script.remove();
  });
})

这个方法需要处理内联和外部脚本两种情况，相对繁琐，但灵活性最高，适合复杂场景。

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