Порядок выполнения javascript при загрузке импорта html

В этом 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>

и некоторый-elt.html:

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

производит в хроме (собственный импорт):

import
index

и в fireforx (полифилл):

index
import

?

Похоже, что теги <script> заблокированы во время загрузки импорта.

Есть ли способ обеспечить выполнение js перед загрузкой импорта?


javascript web-component
person user656449    schedule 18.01.2016    source источник
comment
Здесь есть некоторая информация об отсрочке: html5rocks.com/en/tutorials/webcomponents/imports.   -  person mplungjan    schedule 18.01.2016
comment
не думаю, что я все понял, но, по крайней мере, там пишут "Первый ‹скрипт› после импорта заблокирует рендеринг страницы". У меня есть сценарий над импортом, и похоже, что он все еще заблокирован предстоящим импортом. ааа   -  person user656449    schedule 18.01.2016
comment
В моем Chrome найден ожидаемый порядок: index, затем import. Вы уверены или код. Можете привести живой пример?   -  person Supersharp    schedule 19.01.2016
comment
Примеры любезно предоставлены Abhinav, и при загрузке из codepan у меня они тоже работают, как и ожидалось. Но при локальной загрузке я снова выполняю импорт перед индексированием, см. мой фильм dropbox.com/s/or9m8yj3dup6az0/import.mkv?dl=0   -  person user656449    schedule 19.01.2016
comment
В Chrome (собственный импорт) я получаю индекс, а затем также импортирую....jsbin. com/jumunu/edit?html,консоль,выход   -  person ebidel    schedule 21.01.2016
comment
хорошо, пожалуйста, клонируйте github.com/bushuyev/test_test, установите npm, установите Bower, подайте gulp. Что ты видишь?   -  person user656449    schedule 21.01.2016

Ответы (2)


arrow_upward
1
arrow_downward

Я создал быстрое перо здесь с предоставленной вами разметкой.
Кажется, оно работает одинаковый и правильный вывод (index, затем import) для меня как в FF, так и в хроме.

Но в равной степени возможно, что вы видите что-то другое в своей консоли. Виновником здесь является не то, как анализируется элемент сценария, а скорее консольные API. Это нестандартная функция, которая может возвращать вам другие результаты. как описано здесь

console.log не стандартизирован, поэтому поведение довольно неопределенно и может быть легко изменено от выпуска к выпуску инструментов разработчика.

Чтобы ответить на ваш вопрос, тег скрипта по своей конструкции блокирует, поэтому любой скрипт, который вы поместите перед своим link rel="import", будет выполнен до того, как браузер обнаружит тег импорта.

Вот еще одна ручка (http://codepen.io/vishwaabhinav/pen/bEYwaK) для доказать это (также доступно ниже), где я создаю и добавляю div в тело как в импортированном, так и в основном документе. Он также работает, как и ожидалось, т. е. узел индекса добавляется к телу перед узлом импорта.

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

person Abhinav    schedule 18.01.2016
comment
Спасибо за помощь! Но боюсь, это не консоль, см. это:dropbox.com/ s/or9m8yj3dup6az0/import.mkv?dl=0. На самом деле я заметил это при попытке инициализировать переменную, которая будет использоваться поведением полимера, и обнаружил, что они вызываются перед сценарием в верхней части индексной страницы. Кстати, какую версию хрома вы используете? Мой 47.0.2526.111, кажется, последний. - person user656449; 18.01.2016
comment
Но созданные вами кодовые панели работают, как и ожидалось, — индексируйте, затем импортируйте. - person user656449; 18.01.2016
comment
Я использую ту же версию, что и ваша, которая, я думаю, самая последняя. - person Abhinav; 20.01.2016

arrow_upward
0
arrow_downward

извините всех, похоже, что-то не так со скриптами сборки. Результирующий вывод 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

person user656449    schedule 21.01.2016