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

2023年9月12日 324次阅读

我刚刚发现网络组件,我发现它很棒.尽管如此,它仍未在所有浏览器中实现.出于这个原因,我在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**
    }
});

请注意,在调试时,我可以看到链接是一个链接列表,它具有所有预期的属性(包括导入),但它们为空.

这就是我的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代码的标签.它可以以不同的方式完成,但这不是主要关注点.

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

最佳答案 好吧,正如经常发生的那样,webcomponents.js或Safari没有任何问题.事实证明,可视化指南样板解析了从站点根开始的文件路径,因此我不得不更改所有路径以反映这一事实.现在它正常运作.

无论如何,感谢SO社区,因为他们在那里.

点赞