移除<script type="text/plain">的type属性实现延迟加载在Firefox中失效

你在NextJS开发自定义Cookie同意方案时，通过给脚本设置type="text/plain"阻止浏览器自动加载执行，用户同意后移除type属性并克隆节点替换原节点的方式，在Safari和Chrome能正常生效，但Firefox中即使代码执行、节点已更新，脚本仍未加载。

问题根源 #

Firefox对已插入DOM的script节点有特殊处理逻辑：一旦节点被解析过，即使修改属性或克隆节点，也不会触发重新加载资源的操作。克隆原节点会继承其已被标记为“无需加载”的状态，导致新节点同样不会发起请求。

解决方案：创建全新的script元素替代原节点 #

不要克隆原节点，而是创建完全新的script元素，复制原节点的关键属性后插入DOM替换原节点，代码如下：

const blockedScripts = document.querySelectorAll<HTMLScriptElement>(
  "script[data-cookieconsent]"
);

blockedScripts.forEach((script) => {
  // 创建全新的script标签
  const newScript = document.createElement('script');
  
  // 复制原脚本的所有属性（排除type和标记用的data-cookieconsent）
  Array.from(script.attributes).forEach(attr => {
    if (attr.name !== 'type' && attr.name !== 'data-cookieconsent') {
      newScript.setAttribute(attr.name, attr.value);
    }
  });
  
  // 将新脚本插入原脚本的位置
  script.parentNode?.insertBefore(newScript, script);
  // 移除原脚本节点
  script.remove();
});

关键说明 #

• 全新创建的script元素会被Firefox识别为未解析的资源，从而正常发起网络请求并执行。
• 保留原脚本的async、defer等属性，确保脚本的加载执行行为和预期一致。
• 移除data-cookieconsent标记，避免后续重复处理这些脚本。

内容的提问来源于stack exchange，提问作者Mo W.