Javascript 我使用fetch语句检索HTML页脚，并将其包含在每个页面上，但页脚中的Date（）除外。永远不会执行页脚中的getFullYear脚本

我的HTML页面使用以下方法动态加载我的页眉菜单和页脚

#在我的page-includes.js文件中
获取（“nav menu.html”）
。然后（响应=>{
返回response.text（）
})
。然后（数据=>{
document.querySelector（“nav”）.innerHTML=数据；
});
获取（“footer.html”）
。然后（响应=>{
返回response.text（）
})
。然后（数据=>{
document.querySelector（“footer”）.innerHTML=数据；
})
#我在主页底部尝试的代码
document.getElementsByClassName（“版权年”）[0].innerHTML=“28 BC”；
var spanTags=document.getElementsByClassName（“版权年”）；
span标签[0]。文本（“公元前13年”）；
span标签[1].innetHTML=“28 BC”；
setYear（）；
函数setYear（）{
如果（document.readyState==='interactive'）{
设curYr=new Date（）.getFullYear（）；
对于（i=0；i这是我几年前提出的一个东西，它将在动态加载的HTML中执行脚本

诀窍是在代码中复制脚本标记，并在脚本运行时替换它们

const loadHtml = ((text, dest, replace = false) => {
    if (typeof dest == 'string') {
        dest = document.querySelector(dest);
    }
    const p = new DOMParser();
    const doc = p.parseFromString(text, 'text/html');
    const frag = document.createDocumentFragment();
    while (doc.body.firstChild) {
        frag.appendChild(doc.body.firstChild);
    }
    // handle script tags
    const ret = Promise.all(Array.from(frag.querySelectorAll('script'), script => new Promise(resolve => {
        const scriptParent = script.parentNode || frag;
        const newScript = document.createElement('script');
        if (script.src) {
            newScript.addEventListener('load', e => resolve({ src: script.src, loaded: true }));
            newScript.addEventListener('error', e => resolve({ src: script.src, loaded: false}));
            newScript.src = script.src;
        } else {
            newScript.textContent = script.textContent;
            resolve({ src: false, loaded: true });
        }
        scriptParent.replaceChild(newScript, script);
    })));
    if (replace) {
        dest.innerHTML = '';
    }
    dest.appendChild(frag);
    return ret;
});

在代码中使用它，就像

fetch("footer.html")
.then(response => response.text())
.then(data => loadHtml(data, "footer"))
// this last line isn't really needed, just logs failed scripts
.then(r => r.filter(({loaded}) => !loaded).forEach(({src}) => console.log(`failed to load ${src}`));

但是…使用
document.write
会产生评论中提到的意外副作用-不要使用
document.write
使用DOM操作

e、 g



&抄袭；
var span=document.createElement（'span'）；
span.innerHTML=新日期（）.getFullYear（）；
文件。查询选择器（“版权年”）。附录（span）；
以这种方式添加的html脚本不会被执行。您还应该避免使用
文档。编写
或极其小心地使用它：。@Jaromanda-这一行为很明显，因为没有显示日期。我不明白的是，为什么在加载页面后我不能访问span元素。如果不可能，为什么不可以，而且是这样有解决办法吗？我不喜欢每次需要更改时都要修改几十个网站页面上的页眉菜单和页脚。我可以硬编码这一年，但我永远不会记得在一月份更新它，我也不想在几十个网站上这样做。必须有一种方法通过脚本和使用Fetch来完成这一点来自单个源的导航和页脚。
当我查看源代码时
-查看源代码功能将页面的HTML显示为已加载状态，而不是“当前”状态…您可以选择整个页面（ctrl-a），然后右键单击并“查看选择源代码”-然后您将看到当前状态…或者只使用开发人员工具检查器-您将看到所有html，包括created@JonP-我不反对。但是，这是一种测试脚本是否正在执行的简单方法。我打算使用一些与我在上面所示网页底部尝试的代码相同的东西，但是，即使在页面完全加载后，它也无法访问span元素。谢谢。我阅读了代码，理解了大部分内容，安装了它，visual studio代码告诉我，loadHtml后面的第一个括号中应该有逗号，这是错误的。不太清楚为什么。知道吗？我可能键入了错误…挂起on@DavidKopacz-我在第一行中遗漏了一个
=
：p（这是我的一个库的一部分，所以代码与上面的不完全一样-很抱歉输入错误，我通过在loadHtml后放置一个等号解决了这个问题，它工作了，除了它现在两次显示第一个跨度所在的2020年，而完全不显示第二个跨度。我可能能找到答案。非常感谢先生。T他看起来会很好地解决我的问题。一旦我解决了2020年的双年刊，我会将其标记为解决方案。你可以在www.dot.my last name.com上看到它正在使用中。无需解决这个问题，因为我正在删除第二个版权声明，因为我已经决定将网站上的天文图像公开使用。所以，这个很好用。非常感谢您，先生。