javascript - HTML 在 Internet Explorer 中导入加载顺序

Question

我有一个呈现一些 Polymer 1.0 自定义元素的网页。在head我的部分 index.html文件我有以下内容:

<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 导入 block <script> 元素。<script> 在加载其前面的导入之前不会运行”:

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

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

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

Answer 1

你是对的，这是因为 IE 使用了 polyfill，所以 <link>标记没有按顺序进行。

解决方法是收听 HTMLImportsLoaded webcomponents-lite.js 触发的事件加载 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>