使用w3-include-html导致标签失效、JS脚本无法运行的求助

刚拿到计算机科学学士学位，正在制作和简历配套的作品集网站。一开始用纯静态HTML开发，发现多页面的页眉、页脚内容重复，维护起来麻烦，就用w3-include-html实现动态页面来避免重复更新，但之后遇到了meta、link标签以及引入文件中JS脚本无法正常工作的问题。

具体问题现象 #

• 标签页图标放在header.html中无效，只有直接放在index.html里才生效；
• 网站描述放在footer.html中无效，仅在header.html里有效；
• 在OperaGX、Chrome、Edge中检查页面时，页眉和页脚被自动放入body标签内，和index.html的原始结构不符；
• footer.html中显示版权年份的基础JS脚本无法运行，只有直接把这段JS放到index.html里才有用；
• 网站部署方式：用Apache2（httpd:2-alpine镜像）的Docker容器，通过NginxProxyManager（jlesage/nginx-proxy-manager镜像）配置反向代理并提供HTTPS证书；
• 每次更新后都会按CONTROL+F5强制刷新，甚至手动清除浏览器缓存，确保能看到最新更改。

相关代码 #

index.html #

<!DOCTYPE html>
<html lang="en-US">

<head>
    <!-- <link rel="icon" type="image/png" href="/icons/terminal16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="/icons/terminal48x48.png" sizes="48x48"> -->
    <div w3-include-html="modules/header.html"></div>
</head>

<body>
    <!-- ... -->
</body>

<footer>
    <div w3-include-html="modules/footer.html"></div>
    <!-- <div class="container">
        <small>Matthew Green &copy; 2022 -
            <script>document.write(new Date().getFullYear())</script>
        </small>
    </div> -->
</footer>

<script src="scripts/include_html.js"></script>
<script>includeHTML();</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll("pre code").forEach(block => {
            window.hljs.highlightBlock(block);
        });
    });
</script>

</html>

header.html #

<!-- Meta Data -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="manifest" href="/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<link rel="icon" type="image/png" href="/icons/terminal16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/icons/terminal48x48.png" sizes="48x48">
<meta name="theme-color" content="#ffffff" />
<title>Matthew Green's Showcase</title>
<meta name="description"
    content="Hi, I am Matthew Green and this is a showcase of all my work experience, skills, and projects." />



<!-- Styles -->
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css" />
<style>
    .components-grid {
        display: grid;
        grid-column-gap: 1.4em;
        grid-template-columns: auto;
        grid-template-rows: auto;
    }

    .image-grid {
        display: grid;
        grid-template-rows: auto;
        display: grid;
        grid-gap: 1em;
        grid-template-rows: auto;
        grid-template-columns: repeat(auto-fit,
                minmax(calc(var(--page-width) / 12), 1fr));
    }

    @media only screen and (min-width: 70em) {
        .components-grid {
            grid-template-columns: 3fr 9fr;
        }
    }
</style>

<style>
    :root {
        --global-font-size: 15px;
        --global-line-height: 1.4em;
        --global-space: 10px;
        --font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
            serif;
        --mono-font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
            serif;
        --background-color: #222225;
        --page-width: 60em;
        --font-color: #e8e9ed;
        --invert-font-color: #222225;
        --secondary-color: #a3abba;
        --tertiary-color: #a3abba;
        --primary-color: #62c4ff;
        --error-color: #ff3c74;
        --progress-bar-background: #3f3f44;
        --progress-bar-fill: #62c4ff;
        --code-bg-color: #3f3f44;
        --input-style: solid;
        --display-h1-decoration: none;
    }
</style>



<!-- Navigation Bar -->
<div class="container">
    <!-- ... -->
</div>

footer.html #

<p>
    <small>Matthew Green &copy; 2022-
        <script>document.write(new Date().getFullYear())</script>
    </small>
</p>

scripts/include_html.js #

function includeHTML() {
    var z, i, elmnt, file, xhttp;
    /* Loop through a collection of all HTML elements: */
    z = document.getElementsByTagName("*");
    for (i = 0; i < z.length; i++) {
        elmnt = z[i];
        /*search for elements with a certain atrribute:*/
        file = elmnt.getAttribute("w3-include-html");
        if (file) {
            /* Make an HTTP request using the attribute value as the file name: */
            xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) { elmnt.innerHTML = this.responseText; }
                    if (this.status == 404) { elmnt.innerHTML = "Page not found."; }
                    /* Remove the attribute, and call this function once more: */
                    elmnt.removeAttribute("w3-include-html");
                    includeHTML();
                }
            }
            xhttp.open("GET", file, true);
            xhttp.send();
            /* Exit the function: */
            return;
        }
    }
}

已尝试的解决方法 #

• 在各个HTML文件中增删标签（比如head标签）；
• 使用w3官网提供的include脚本；
• 将includeHTML()调用移至head标签内。

以上方法均未解决问题，恳请提供可行的解决方案。

内容的提问来源于stack exchange，提问作者matthewgreen