2

我是 webcomponenetsjs 的新手，我一直在尝试使用 HTMLImports 将另一个 HTML 导入我的 index.html。由于 chrome 支持 HTML 导入，我对此没有任何问题。但是，当我尝试使用 firefox 进行相同操作时，HTML 导入无法按预期工作。问题是它加载了所有的 HTML 元素，加载了所有的脚本，然后只加载了 |link rel="import"|。开始执行导入。为了更清楚，以下是触发警报的顺序： 1.在

供应商
之后 2.在导入之前
3.在 vendor.js 中警报
4.在 test.html 中警报。

默认情况下，html 导入的执行就像

1.alert 在 vendor.js
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>
4

1 回答 1

2

这是因为 Firefox 使用了HTMLImports.jspolyfill ，<link>因此调用是异步的。

对于在 IE 或 Edge 中也显示的此问题的解决方案：HTML 在 Internet Explorer 中导入加载顺序

于 2016-04-15T06:59:32.573 回答