HTML5带有动态创建的链接导入

我正在尝试理解，为什么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>

为什么会发生以及如何修复？

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

修复它的一种方法是在使用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处理程序，以便在事情出错时运行。

相关内容

最新更新

热门标签：