Question

此http://webcomponents.org/polyfills/html-imports/表示以下内容：

在本机导入下，主文档中的<script>标记会阻止导入的加载。

为什么然后这个：

<html>
<head>

  <script>
    console.log('index');
  </script>

  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="some-elt.html">

</head>
<body>
</body>
</html>

和some-elt.html：

<html>
<head>
  <script>
    console.log('import');
  </script>
</head>
<html>

以chrome（本机导入）生成：

import
index

和fireforx（polyfill）：

index
import

在加载导入时，似乎<script>标记被阻止。

在加载任何导入之前是否还有一些方法可以确保执行js？

Answer 1

我创建了一个带有您提供的标记的快速笔here 似乎在FF和chrome中为我生成了相同且正确的输出（index然后import）。

但同样可能的是，您可能会在控制台中看到不同的内容。罪魁祸首不是解析脚本元素的方式，而是控制台API。这是一个非标准的feature，可能会按照here

的说明为您返回不同的结果

console.log未标准化，因此行为相当不明确，并且可以从开发人员的发布版本轻松更改工具

要回答您的问题，脚本标记设计是阻止的，因此您在link rel="import"之前放置的任何脚本都将在浏览器遇到导入标记之前执行。

这是另一支笔（http://codepen.io/vishwaabhinav/pen/bEYwaK）来证明这一点（也可在下面找到），我在创建并在导入文件和主文档中将div附加到body。它也按预期工作，即索引节点在导入节点之前附加到主体。

＆＃13;

<html>
<head>

  <script>
    var node = document.createElement('div');
    node.innerHTML = 'Index';
    document.body.appendChild(node);
  </script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.20/webcomponents-lite.js"></script>

  <link rel="import" href="http://codepen.io/vishwaabhinav/pen/XXzjZW.html">

</head>
<body>
  
</body>
</html>

＆＃13;

Answer 2

对不起每个人，构建脚本似乎有些不对劲。生成的html输出如下：

<!DOCTYPE html><html><head>
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.20/webcomponents-lite.js"></script>-->
  <link rel="import" href="some-elt.html">

</head>
<body>

<script src="index.js"></script></body></html>

https://github.com/PolymerElements/polymer-starter-kit/issues/669

加载html导入时执行javascript的顺序

2 个答案: