4

我有一个呈现一些 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.htmlscript引用其他 HTML 文件（通过 HTML 导入），这些文件又使用标准标签引用 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 导入的本机支持，但想知道如何解决这个问题，以便脚本按预期顺序加载。

4

1 回答 1

4

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

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

<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>
于 2016-01-19T09:01:07.423 回答