在Internet Explorer中，HTML导入的加载顺序

Question

在Internet Explorer中，HTML导入的加载顺序

javascripthtmlpolymerweb-componenthtml-imports

4

我有一个网页，渲染了一些 Polymer 1.0 自定义元素。在我的 index.html 文件的 head 部分中，我有以下内容：

<link rel="import" href="my-elements.html">
<script src="script1.js"></script>
<script src="script2.js"></script>

my-elements.html 引用其他 HTML 文件（通过 HTML 导入），这些文件又使用标准的 script 标签引用 JavaScript 文件。

在 Chrome 浏览器中，一切都按预期运行。 my-elements.html 中的 JavaScript 文件在 script1.js 和 script2.js 之前加载。但是，在 Internet Explorer（v11）中，它们以相反的顺序加载。也就是说，先加载script1.js和script2.js。

在下面的文章中，它指出：“HTML 导入会阻止 <script> 元素。只有在导入完成后，<script> 才能运行”：

https://gist.github.com/omo/9986103

那么为什么 Internet Explorer 的排序不同呢？

请注意，我正在使用 webcomponents-lite.js 作为我的 Web 组件 polyfill 库。我怀疑我遇到的问题是因为 Internet Explorer 没有本地支持 HTML 导入，但想知道如何解决这个问题，以便脚本按预期顺序加载。

- aw1975

嗯...根据微软的说法，你应该使用Edge（v12）...但是根据这个星球上其他人的说法，你应该使用除IE或Edge之外的任何其他浏览器...毫无疑问，转向更好的浏览器并不可耻。 - ymz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Supersharp · Accepted Answer

你说得对，这是因为IE正在使用一个polyfill，所以<link>标签没有按顺序进行处理。

解决方法是监听webcomponents-lite.js库触发的HTMLImportsLoaded事件，当HTML导入已加载时。

<link rel="import" href="my-elements.html">
<script>
  document.addEventListener( "HTMLImportsLoaded", function () {
    var s1 = document.createElement( "script" )
    var s2 = document.createElement( "script" )
    s1.setAttribute( "src", "script1.js" )
    s2.setAttribute( "src", "script2.js" )
    document.head.appendChild( s1 )
    document.head.appendChild( s2 )
  } )
</script>