能否从HTML的script标签导入JS？CMS生成数据无全局污染访问咨询

Hey，我来帮你逐个解决这两个问题：

1. 能否从HTML文件的script标签中导入JS代码？ #

直接用ES6的import语法从HTML文件里导入script标签的代码是行不通的。原因很简单：import要求导入的必须是符合ES模块规范的JavaScript文件，服务器得返回application/javascript这类正确的MIME类型；而HTML文件的MIME类型是text/html，完全不符合模块脚本的要求——这也是你之前报错的核心原因之一。

不过可以通过间接方式实现：先获取HTML文件内容，解析出目标script标签里的代码，再把这段代码转为ES模块执行并获取导出内容，具体实现可以看第二个问题里的方案。

2. 不污染全局命名空间的前提下访问CMS生成的HTML里script内的数据 #

你尝试用ES6模块导出失败，问题根源在于HTML文件本身不能作为ES模块被导入，而且普通的script标签即使写了export，也不会被浏览器当作模块处理。下面给你两种可行的方案，都不会污染全局命名空间：

方案一：修改CMS生成的script标签为模块类型（如果有权限调整CMS） #

如果你能修改CMS的输出配置，可以让它生成type="module"的script标签，并直接导出数据：

<!-- CMS生成的HTML内的目标script -->
<script type="module">
  const list = ['a','b','c'];
  export default list;
</script>

之后在你的模块脚本里，就可以通过动态导入的方式获取这份数据（因为模块脚本的变量默认不会泄漏到全局）。不过如果没法修改CMS的话，方案二更适合你。

方案二：Fetch HTML并解析script内容，转为模块执行（无需改动CMS） #

这个方案完全在你的代码里处理，不需要调整CMS的输出，而且全程不会污染全局：

async function getCMSData() {
  // 1. 获取目标HTML文件的内容
  const htmlRes = await fetch('./index.html');
  const htmlText = await htmlRes.text();

  // 2. 解析HTML，定位到目标script标签
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlText, 'text/html');
  // 这里可以根据实际情况调整选择器，比如给script加id后用querySelector('#cms-data-script')
  const targetScript = doc.querySelector('script');
  if (!targetScript) {
    console.error('没找到目标script标签');
    return null;
  }

  // 3. 把script内容转为ES模块，添加导出语句
  const moduleCode = `${targetScript.textContent}\nexport default list;`;
  
  // 4. 创建Blob生成模块URL，让浏览器识别为JS模块
  const blob = new Blob([moduleCode], { type: 'application/javascript' });
  const moduleUrl = URL.createObjectURL(blob);

  try {
    // 5. 动态导入模块，拿到导出的数据
    const { default: list } = await import(moduleUrl);
    return list;
  } catch (err) {
    console.error('获取数据失败:', err);
    return null;
  } finally {
    // 6. 清理Blob URL，避免内存浪费
    URL.revokeObjectURL(moduleUrl);
  }
}

// 调用示例
getCMSData().then(data => {
  if (data) {
    console.log('成功获取CMS数据:', data);
    // 在这里处理你的数据即可
  }
});

为什么你的尝试会失败？ #

你直接写import list from './index.html'，触发了两个问题：

• 服务器返回的HTML文件MIME类型是text/html，而ES模块脚本要求服务器返回JS相关的MIME类型，浏览器会严格校验这一点，所以会报Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html"。
• HTML文件本身不是ES模块，哪怕里面写了export语句，浏览器也不会把它当作模块解析，自然无法直接导入。

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