Question

我刚刚发现网络组件，我发现它很棒。尽管如此，它仍未在所有浏览器中实现。出于这个原因，我在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没有任何问题。事实证明，可视化指南样板解析了从站点根开始的文件路径，因此我不得不更改所有路径以反映这一事实。现在它正常运作。

感谢SO社区，无论如何，感谢他们。

如何在Safari中使用HTML components.js进行HTML导入

1 个答案: