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