gpt4 book ai didi

javascript - 使用动态创建的链接进行 HTML5 导入

转载 作者:行者123 更新时间:2023-12-03 04:55:48 24 4
gpt4 key购买 nike

我试图理解为什么 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>

导入.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>

导入.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 处理程序以在出现问题时运行。

关于javascript - 使用动态创建的链接进行 HTML5 导入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42434271/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com