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

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

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

但同样可能的是，您可能会在控制台中看到不同的内容。 罪魁祸首不是解析脚本元素的方式，而是控制台API。 这是一个非标准的功能和说明可能会为您返回不同的结果，在这里

console.log不是标准化的，因此行为相当未定义，并且可以在开发人员工具的发布之间轻松更改

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

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

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

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 个解决方案

解决方案1
1 2016-01-18 18:13:53

解决方案2
0 2016-01-21 19:13:24

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

问题描述

2 个解决方案

解决方案1 1 2016-01-18 18:13:53

解决方案2 0 2016-01-21 19:13:24

解决方案1
1 2016-01-18 18:13:53

解决方案2
0 2016-01-21 19:13:24