时间戳

首页 > 解决方案 > 从 HTML 文件中的脚本标签导入 js。可能的？

javascript - 从 HTML 文件中的脚本标签导入 js。可能的？

问题描述

我想从 cms 生成的 html 文件中的 script 标签访问数据。是否可以在不污染全局命名空间的情况下做到这一点？我尝试使用 es6 模块，但失败了，我找不到任何有关它的信息。

    <script>
        let list = ['a','b','c'];
        export default list
    </script>

    //test.js
    import list from './index.html'

错误：' http://localhost:8080/index.html net::ERR_ABORTED 404' 或：'加载模块脚本失败：服务器以“text/html”的非 JavaScript MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。

标签： javascripthtmlecmascript-6es6-modules

解决方案

不，HTML 规范尚未涵盖这样做¹（我怀疑它永远不会是²）。（如果是，您仍然需要type="module"在您的第一个脚本标记上。）在 HTML 页面中没有指定脚本元素的模块说明符。目前，唯一的模块说明符是 JavaScript 文件的 URL。规范中的详细信息。

相反，您可能想要这样的东西：

<script type="module">
import { setList } from "./test.js";
setList(['a', 'b', 'c']);
</script>

... wheretest.js导出一个命名的导出，让您告诉它要使用的列表。

（或者当然，它可能是默认导出。）

内联script type="module"标签可以import，但是虽然它们可以使用export，但没有任何东西可以利用它们创建的导出，因为它们没有有用的模块说明符。

¹ 它是 HTML 规范，因为模块说明符的形式和语义由 JavaScript 规范留给宿主环境（详见此处）。JavaScript 规范对它们的全部说明是它们是字符串文字。

² 当然可以，例如使用片段标识符。但是，与 HTTP/1.1（尤其是与 HTTP/1.0）相比，HTTP/2 多路复用使得离散资源加载如此之快，现在将所有内容包含在单个资源中的动力比几年前要低得多。

推荐阅读