HTML导入Internet Explorer中的加载顺序 [英] HTML imports load order in Internet Explorer

问题描述

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

I have a web page that renders some Polymer 1.0 custom elements. In the head section of my index.html file I have the following:

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

my-elements.html 引用其他HTML文件（通过HTML导入），然后使用标准脚本标签引用javascript文件。

my-elements.html references other HTML files (via HTML imports) which in turn references javascript files using standard script tags.

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

With Chrome browser it all works as expected. The javascript files within my-elements.html load before script1.js and script2.js. However with Internet Explorer (v11) they load in the opposite order. i.e. script1.js and script2.js load first.

在下面的文章中，它指出HTML Imports阻止< script> 元素。< script> 不会运行直到加载前面的导入：

In the following article it states "HTML Imports block <script> elements. The <script> doesn’t run until its preceding imports are loaded":

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

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

So why is the ordering different with Internet Explorer?

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

Note that I'm using webcomponents-lite.js as my web components polyfill library. I suspect the behaviour I'm encountering is due to Internet Explorer not having native support for HTML imports, but would like to know how to work around this so that the scripts load in the intended order.

推荐答案

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

You're right, it's because IE is using a polyfill, so the <link> tag is no proceeded sequentially.

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

The workaround is to listen to the HTMLImportsLoaded event fired by the webcomponents-lite.js library when the HTML Import is loaded.

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

这篇关于HTML导入Internet Explorer中的加载顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！