使用webcomponenetsjs的HTMLImports以意外的执行顺序加载导入-firefox



我是webcomponeetsjs的新手,我一直在尝试使用HTMLImports将另一个HTML导入到我的index.HTML中。由于chrome支持HTML导入,我对此没有问题。但当我对firefox进行同样的尝试时,HTML导入并没有按预期工作。问题是,它加载了所有HTML元素,加载了所有脚本,然后只有|linkrel="import"|开始执行导入。为了更清楚地说明,以下是触发警报的顺序:

1。在供应商
2之后。导入前
3。alert-intender.js
4.alert-intentertest.html.

默认情况下,html导入的执行类似于vendor.js中的

1.alert
2。在供应商
3之后。在import.js
4.alert内部test.html。

当然,它在chrome中的工作顺序相同。对于我所缺少的任何帮助,我们将不胜感激。

<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
  <link rel="icon" type="image/ico" href="/images/favicon.ico"/>
  <script src="lib/webcomponentsjs/HTMLImports.js"></script>
  <link rel="import" href="js_imports/vendorjs.html">
  <script>alert("after vendor");</script>
<b>
</head>
<body class="side-nav-collapsed">
<script>alert("before import");</script>
<link rel="import" href="test.html">
</body>
</html>

因为Firefox使用了HTMLImports.js polyfill,所以<link>调用是异步的。

对于IE或Edge中也出现的此问题的解决方案:HTML导入Internet Explorer 中的加载顺序

最新更新