HTML5 使用动态创建的方式导入 link

Question

我想了解为什么 HTML5 导入不适用于动态创建的 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>

为什么会发生以及如何解决？

Answer 1

会发生这种情况，因为当您调用 querySelector('link[rel="import"]') 时 link 尚未加载。

修复它的一种方法是运行使用 link.onload 加载 link 时的后续代码。您甚至可以保存 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 处理程序。

HTML5 使用动态创建的方式导入 link

HTML5 Import with dynamically created link

javascript

html

html5-import