Import js from script tag in HTML file. Possible?

爷,独闯天下 提交于 2020-06-08 17:14:23

问题


I want to access data from script tag in html file, produced by cms. Is it possible to do this without polluting global namespace? I've tried to use es6 modules but I've failed and I couldn't find any info about it.

    <script>
        let list = ['a','b','c'];
        export default list
    </script>
    //test.js
    import list from './index.html' 

Error: 'http://localhost:8080/index.html net::ERR_ABORTED 404' or: 'Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.'


回答1:


No, doing that isn't covered by the HTML specification yet¹ (and I suspect it never will be²). (If it were, you'd still need type="module" on your first script tag.) There's no module specifier that specifies a script element in an HTML page. At the moment, the only module specifiers are URLs for JavaScript files. Details in the spec.

Instead, you probably want something like this:

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

...where test.js exports a named export that lets you tell it what list to use.

(Or of course, it could be a default export.)

Inline script type="module" tags can import, but while they can use export, nothing can make use of the exports they create because they have no useful module specifier.


¹ It's the HTML spec because the form and semantics of module specifiers are left to the host environment by the JavaScript spec (details here). All that the JavaScript spec says about them is that they're string literals.

² It certainly could be, for instance using fragment identifiers. But with HTTP/2 multiplexing making discrete resource loading so fast compared with HTTP/1.1 (and esp. vs. HTTP/1.0), the impetus to make everything contained in a single resource is dramatically lower now than it was some years ago.




回答2:


You can't export JS from HTML. You can import it however, using the type="module" attribute on the <script> tag:

<script type="module">
  import list from "./test.js";
  //Use list
</script>


来源:https://stackoverflow.com/questions/56375215/import-js-from-script-tag-in-html-file-possible

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!