html - 如何通过 web components.js 在 Safari 中使用 HTML 导入

Question

我最近才接触到 Web 组件，我发现它很棒。尽管如此，它仍未在所有浏览器中实现。出于这个原因，我在 Safari 中使用 webcomponents.js 以便能够使用 HTML 导入。有几篇关于如何使用 polyfill 的文章和教程，但我仍然发现缺少可用的文档。就我而言，我正在创建一个视觉风格指南，并且需要能够在整个指南中多次重复使用某些代码。我相信 HTML 导入可以帮助我实现我的目标，但是一旦我加载了 webcomponents.js，我就不知道如何进行了。请注意，此时我并没有尝试创建自己的 Web 组件，只是使用导入将某些 HTML 位加载到我的视觉指南中的某些位置。

这是我正在使用的示例代码:

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 代码的标签。它可以以不同的方式完成，但这不是主要问题。

任何帮助将不胜感激。感谢阅读。

Answer 1

好吧，正如经常发生的那样，webcomponents.js 或 Safari 没有任何问题。事实证明，视觉指南样板解析了从站点根目录开始的文件路径，因此我不得不更改所有路径以反射(reflect)这一事实。现在它工作正常。

无论如何，感谢 SO 社区的存在。