FireFox中自定义组件内Script函数未定义问题排查

问题原因 #

FireFox 与 Chrome/Edge 对通过DOMParser创建的<template>内脚本的处理逻辑存在差异：

• Chrome/Edge 在解析这类template时，会自动执行其中的<script>代码，并将脚本内的函数（比如hello）挂载到全局作用域，因此组件能正常调用。
• FireFox 则不会自动执行DOMParser生成的template内的脚本，也不会将函数注册到全局，导致调用时出现"未定义"报错。
• 而直接写在HTML文档中的template，浏览器在初始解析整个文档时会按标准流程处理其中的脚本，所以FireFox能正常识别函数。

解决办法 #

方法1：手动提取并执行template内的脚本 #

创建完template后，主动提取其中的脚本内容，生成新的script标签插入到文档中，强制FireFox执行脚本并注册函数。示例代码：

// 原有的template字符串
const templateStr = `
<template id="custom-component-tpl">
  <script>
    function hello() {
      console.log('Hello from template');
    }
  </script>
  <div class="component-content">...</div>
</template>
`;

// 用DOMParser解析生成template
const parser = new DOMParser();
const doc = parser.parseFromString(templateStr, 'text/html');
const template = doc.querySelector('#custom-component-tpl');

// 处理template内的脚本
const scripts = template.content.querySelectorAll('script');
scripts.forEach(script => {
  // 创建新的script元素
  const execScript = document.createElement('script');
  execScript.textContent = script.textContent;
  // 插入到head中执行
  document.head.appendChild(execScript);
  // 移除原template内的脚本，避免后续重复执行
  script.remove();
});

// 最后将template添加到文档
document.body.appendChild(template);

方法2：主动将函数挂载到全局（需配合方法1） #

如果不想修改脚本执行逻辑，可在template的脚本里直接把函数绑定到window对象，但要注意全局变量污染问题。修改后的脚本内容：

<script>
  // 主动挂载到window
  window.hello = function() {
    console.log('Hello from template');
  };
</script>

注意：这种方式仍需配合方法1的脚本提取逻辑，因为FireFox不会自动执行DOMParser生成的template内的脚本。

内容的提问来源于stack exchange，提问作者Ahmed Kamal ELSaman