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