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

我有一个网页,呈现一些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导入),后者又使用标准脚本标记引用javascript文件.

使用Chrome浏览器,它可以按预期工作. my-elements.html中的javascript文件在script1.js和script2.js之前加载.但是,对于Internet Explorer(v11),它们以相反的顺序加载.即script1.js和script2.js首先加载.

在下面的文章中,它指出了“HTML Imports阻止< script>元素.< script>在加载前面的导入之前不会运行”：

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

那么为什么订购与Internet Explorer不同？

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

解决方法:

你没错,这是因为IE正在使用polyfill,所以< link>标签没有按顺序进行.

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

<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>

标签：javascript,polymer,web-component,html,html-imports
来源： https://codeday.me/bug/20190623/1270612.html