如何配置jQuery使.html()注入的外部<script>标签保持外部形式？

算力阿峰

2026-7-10

jQuery .html() 处理外部脚本标签的问题解析及解决方案

问题原因

jQuery的.html()方法会将外部<script src="...">转为内联脚本，核心是为了确保脚本能被执行——原生innerHTML插入带src的script标签时，浏览器不会自动加载执行这些脚本。jQuery为了模拟浏览器原生解析HTML时执行脚本的行为，会主动请求外部脚本内容，再创建内联script标签插入DOM触发执行。

解决方法

方法1：手动创建并插入script标签

跳过jQuery的.html()，直接创建script元素设置src属性后插入DOM，这样不会生成内联脚本，符合CSP要求：

// 原生JS方式
const script = document.createElement('script');
script.src = 'xyz.js';
document.querySelector('#target').appendChild(script);

// jQuery方式
$('<script>', { src: 'xyz.js' }).appendTo('#target');

方法2：重写jQuery的.html()处理逻辑

若必须使用.html()，可重写其内部脚本处理逻辑，保留外部script标签不转为内联。核心是跳过带src属性的script标签的内容获取步骤，直接插入原标签后手动触发加载：

(function($) {
  const originalHtml = $.fn.html;
  $.fn.html = function(html) {
    if (typeof html === 'string' && html.includes('<script src=')) {
      this.each(function() {
        this.innerHTML = html;
        // 手动处理外部脚本加载
        const scripts = this.querySelectorAll('script[src]');
        scripts.forEach(script => {
          const newScript = document.createElement('script');
          // 复制原脚本的所有属性
          Array.from(script.attributes).forEach(attr => {
            newScript.setAttribute(attr.name, attr.value);
          });
          script.replaceWith(newScript);
        });
      });
      return this;
    }
    // 其他场景沿用原生方法
    return originalHtml.apply(this, arguments);
  };
})(jQuery);