CODEWITHSUNDEEP
htmlimport
Phillip Senn
Phillip Senn

Reputation: 47595

Trying to get import to work

Inspired by this html5rocks post, I thought I'd try link rel="import". In the console, I get:

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

But I don't get "Hello World!" on the page.

Here's my code:

<!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>

And HelloWorld.htm contains:

<h1>Hello World!</h1>

Edit:

In the console, I can see that <h1>Hello World!</h1> is inside the link tag as another #document, complete with <html><head></head></body>.

Upvotes: 0

Views: 71

Answers (1)

TheHans255
TheHans255

Reputation: 2198

According to the same HTML5Rocks post, when you import an HTML resource, it is accessible as a JavaScript object. Specifically, a Document:

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

That does contradict somewhat with the beginning of the article, which balks at using JavaScript to load HTML, but at least it uses much less JavaScript (the kind that can, perhaps, fit in a browser tag) and certainly is not subject to the CORS restrictions that AJAX has to deal with.

Upvotes: 1

Related Questions