4

Polymer 1.0 カスタム要素をレンダリングする Web ページがあります。私のファイルの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 ファイル。ただし、Internet Explorer (v11) では逆の順序で読み込まれます。つまり、最初にロードします。script1.jsscript2.jsscript1.jsscript2.js

次の記事では、「HTML インポートは<script>要素をブロックします。<script>は、前のインポートが読み込まれるまで実行されません」と述べています。

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

では、なぜ Internet Explorer で順序が異なるのでしょうか?

Web コンポーネントのポリフィル ライブラリとして webcomponents-lite.js を使用していることに注意してください。私が遭遇している動作は、Internet Explorer が HTML インポートをネイティブでサポートしていないことが原因であると思われますが、スクリプトが意図した順序で読み込まれるようにこれを回避する方法を知りたいです。

4

1 に答える 1

4

そうです、IE はポリフィルを使用しているため、<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 に答える