Я только недавно наткнулся на веб-компоненты, и я нахожу это замечательным. Тем не менее, он все еще не реализован во всех браузерах. По этой причине я использую webcomponents.js в Safari, чтобы иметь возможность использовать импорт HTML. Существует несколько статей и руководств по использованию полиполков, но я все еще не вижу доступной документации. В моем случае я создаю руководство по визуальному стилю и должен многократно использовать несколько бит кода во всем руководстве. Я считаю, что импорт HTML мог бы помочь мне в достижении моей цели, но как только я загружу webcomponents.js, я не знаю, как это сделать. Обратите внимание, что в этот момент я не пытаюсь создать свои собственные веб-компоненты, просто используйте импорт для загрузки определенных бит HTML в определенные местоположения в моем визуальном руководстве.Как использовать импорт HTML в Safari с веб-компонентами.js
Это пример кода я использую:
window.addEventListener('HTMLImportsLoaded', function (e) {
"use strict";
var links,
i,
content;
links = document.querySelectorAll('link[rel="import"]'); // I have more than one link tag
for (i = 0; i < links.length; i += 1) {
content = links[i].import;
alert(content); //This shows **null**
}
});
Обратите внимание, что при отладке я могу видеть, что links список ссылок, и что он имеет все ожидаемые свойства (в том числе импорт), но они равны нулю.
Это как мой источник HTML выглядит следующим образом:
<div id="outerdiv">
<div id="innerdiv">
<header>
<input id="inputfield" class="textinput" type="text">
<span id="messagespan">You have notifications</span>
<label id="snolabel"><input id="snocheck" type="checkbox"> New only</label>
<link rel="import" href="main-menu.html"/>
<ul id="menu">
<li id="reloadbutton">Reload All</li>
<li id="settingsbutton">Settings</li>
</ul>
</header>
<section id="section-repos">
<h4>Repositories</h4>
<link rel="import" href="repo-listing.html"/>
</section>
</div>
</div>
Обратите внимание, что есть два <link rel="import"> тегов в использовании здесь. Связанные файлы находятся в одной папке, поэтому нет проблем с неправильным путем.
Как только я смогу загрузить файлы, на которые ссылаются, я намерен заменить соответствующие теги <link> на фактический HTML-код. Это можно сделать по-другому, но это не главное.
Любая помощь будет оценена по достоинству. Спасибо за прочтение.