导入 HTML 元素的更好方法？答案

【问题标题】：A better way to import HTML elements?导入 HTML 元素的更好方法？
【发布时间】：2021-03-06 19:21:29
【问题描述】：

我正在尝试以这种方式从另一个 HTML 导入元素，并且它可以工作，但是虽然在 localhost 中看起来不错，但在 github 页面中看起来很糟糕，它给了我一些错误和限制

¿我还有什么选择可以导入 HTML 元素并且不重复代码？

header.html

<div class="logo-container" id="container">
        <a href="index.html">
            <img src="assets/img/logo.jpg" alt="Bright Academy">
        </a>
</div>

<div class="menu" id="menu">
            <img src="../../assets/icons/burger-menu.svg" alt="">
</div>

index.js

function importElements() {
    const header = document.getElementById('header');
    const footer = document.getElementById('footer');
    const sidebar = document.getElementById('sidebar');
    function chargeHTMLElements(url, parent) {
        fetch(url)
            .then(response => response.text())
            .then(element => {
                parent.innerHTML = element;
            })
    }

chargeHTMLElements('/src/layouts/header.html', header);
chargeHTMLElements('/src/layouts/footer.html', footer);
chargeHTMLElements('/src/layouts/sidebar.html', sidebar);  
}

importElements();

index.html

<!--Header charged since import.js-->
<header class="header" id="header" ></header>

【问题讨论】：

标签： javascript html import

【解决方案1】：

考虑等到所有响应都返回后才显示整个页面，这样整个内容就会立即显示。从类似的东西开始

<body class="loading">

.loading {
  display: none; // or make a more fancy looking loading screen
}

所以最初什么都不会显示。然后使用Promise.all 等待所有响应，等所有响应都返回后，从正文中删除该类以显示所有内容：

function chargeHTMLElements(url, parent) {
    return fetch(url) // make sure to return this Promise
        .then(response => response.text())
        .then(element => {
            parent.innerHTML = element;
        })
}
Promise.all([
    chargeHTMLElements('/src/layouts/header.html', header),
    chargeHTMLElements('/src/layouts/footer.html', footer),
    chargeHTMLElements('/src/layouts/sidebar.html', sidebar),
])
    .then(() => {
        document.body.classList.remove('loading');
    })
    .catch(handleErrors); // don't forget this part

更好的解决方案是使用 EJS 之类的模板引擎，以便 服务器 在页眉、页脚和侧边栏已经填充的情况下将 HTML 提供给客户端，而不是让客户端单独获取并填充 DOM。

【讨论】：

谢谢！我尝试了该解决方案，但 github 页面仍然无法正常工作。无论如何，这可能是一个不同的麻烦，因为从 index.css 导入的一些 CSS 都不收费
你到底是什么意思，“效果不好”？确保调整 CSS，以便在服务器的响应全部返回之前页面上不显示任何内容
nazarenoalt.github.io/bright-academy 你可以看到内容被破坏了，但是这不会发生在本地服务器中。只有在 github 页面中（我在存储库中推送了更改）
端点上不存在您请求的页面。例如https://nazarenoalt.github.io/src/layouts/header.html 根本不存在。现在，这不是 CSS 或布局问题，而是您没有推送网站需要的所需文件的问题
天哪，这很奇怪。存储库将文件推送到此处github.com/nazarenoalt/bright-academy/tree/main/src/layouts