Question

受到this html5rocks post的启发，我想我会尝试使用link rel =＆＃34; import＆＃34;。在控制台中，我得到：

yay!
Loaded import: http://www.example.com/HelloWorld.htm

但是我没有得到＃Hello World！＆＃34;在页面上。

这是我的代码：

<!DOCTYPE html>
<html>
<body>
<script>
function supportsImports() {
  return 'import' in document.createElement('link');
}

if (supportsImports()) {
  console.log('yay!')
} else {
  console.log('boo!')
}
function handleLoad(e) {
    console.log('Loaded import: ' + e.target.href);
}
function handleError(e) {
    console.log('Error loading import: ' + e.target.href);
}
</script>
<link rel="import" href="HelloWorld.htm" onload="handleLoad(event)" onerror="handleError(event)">
</body>
</html>

HelloWorld.htm包含：

<h1>Hello World!</h1>

编辑：

在控制台中，我可以看到＆lt; h1＆gt; Hello World！＆lt; / h1＆gt;在链接标记内作为另一个#document，包含＆lt; html＆gt;＆lt; head＆gt;＆lt; / head＆gt;＆lt; / body＆gt;。

Answer 1

根据相同的HTML5Rocks帖子，当您导入HTML资源时，它可以作为JavaScript对象访问。具体来说，是Document：

var myImport = document.querySelector('link[rel="import"]').import;
document.querySelector(/* get the element we want here */).appendChild(myImport.body);

这与文章的开头有些矛盾，本文开头使用JavaScript加载HTML，但至少它使用的JavaScript少得多（可能适合浏览器标签的那种），当然不是主题对AJAX必须处理的CORS限制。

试图让导入工作

1 个答案: