HTML5 Импорт с динамически созданной ссылкой

Я пытаюсь понять, почему HTML5 Import не работает с динамически созданным link элемент.

Первый пример Это нормально работает.

main_page.html:

<head>
    <link rel="import" href="import.html">
</head>
<body>
    <script>
        var imported = document.querySelector('link[rel="import"]').import;
        var el = imported.querySelector('#foo');
        document.body.appendChild(el);
    </script>
</body>

import.html:

<div id="foo">foo</div>

Второй пример По какой-то причине это не работает.

main_page.html:

<body>
    <script>
        var link = document.createElement('link');
        link.rel = 'import';
        link.href = 'import.html';
        document.head.appendChild(link);

        var imported = document.querySelector('link[rel="import"]').import;
        var el = imported.querySelector('#foo');
        document.body.appendChild(el);
    </script>
</body>

import.html:

<div id="foo">foo</div>

Почему это происходит и как это можно исправить?

Источник

1 ответ

Решение

Это произошло бы потому, что link еще не загружен, когда вы звоните querySelector('link[rel="import"]'),

Один из способов исправить это - запустить следующий код, когда ссылка загружена с помощью link.onload, Вы даже можете сохранить это querySelector вызов, который должен сделать это немного быстрее:

 var loadFoo = function(event) {
   var imported = event.target.import;
   var el = imported.querySelector('#foo');
   document.body.appendChild(el);
 }

 var link = document.createElement('link');
 link.rel = 'import';
 link.href = 'import.html';
 link.onload = loadFoo;
 document.head.appendChild(link);

Вы можете (и, вероятно, должны) добавить onerror обработчик для запуска, когда что-то идет не так.

Источник
Другие вопросы по тегам