我使用获取语句检索我的 HTML 页脚并将其包含在每个页面上，但页脚中的 Date().getFullYear 脚本从未执行

Question

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

# in my page-includes.js file

fetch("nav-menu.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("nav").innerHTML = data;
  });

fetch("footer.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("footer").innerHTML = data;
  })

# code i tried at the bottom of my main page

    <script>
        
      document.getElementsByClassName("copyright-year")[0].innerHTML = "28 BC";
      var spanTags = document.getElementsByClassName("copyright-year");
      spanTags[0].text("13 BC");
      spanTags[1].innetHTML = "28 BC";
      setYear();

      function setYear(){
        if (document.readyState === 'interactive') {
          let curYr = new Date().getFullYear();
          for (i=0; i<span.length; i++) {
             spanTags[i].innerHTML = curYr;
          }
      }
      
    /* though I really don't know JQuery I tried this first */
    /* $(".copyright-year").text(new Date().getFullYear()); */
    
    </script>

<mainpage>
    <nav class="navbar" id="sectionsNav">
    </nav>  

    <footer class="footer footer-default">
    </footer>
</mainpage>

<included-footer-html>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="copyright float-left">
                &copy;
                <span class="copyright-year">
                    <script defer>document.write(new Date().getFullYear());</script>
                </span>
                &nbsp;Kopacz, LLC
            </div>
            <div class="float-right">
                All Rights Reserved
                <sub><i class="material-icons">public</i></sub> Worldwide
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="copyright float-none">
                Astronomy Photographs &copy;
                <span class="copyright-year">
                    <script defer>document.write(new Date().getFullYear());</script>
                </span>
                &nbsp;David Kopacz
            </div>
        </div>
    </div>
</div>
</included-footer-html>

问题是我是在 included.js 加载的 footer.html 中包含日期函数，还是只是嵌入一个简单的 span 标签，然后在页面加载后尝试修改它的文本, 日期永远不会放在页面上。

如果我用脚本将页脚 HTML 复制并粘贴到任何网页的底部，年份会完美显示，但是当通过此 Fetch 函数包含时，什么也不会显示。

最值得注意的是，当我查看我网站上任何网页的源代码时，我只会看到 Fetch 用来定位和放置导航和页脚的标签 HTML。实际的导航菜单和页脚 HTML 从未出现在源代码中，只有它们的容器标签和 .

可以在浏览器中使用 Inspect 查看包含的 HTML。

那么，如何在日期函数中访问这些“半隐藏”HTML 元素和脚本？

Answer 1

这是我几年前提出的一些东西，它将以动态加载的方式执行脚本 HTML

诀窍是在代码中复制脚本标签并替换它们 in-place - 等等 - 脚本运行

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 操作

例如

<div class="copyright float-left">
    &copy;
    <span class="copyright-year">
      <script>
        var span = document.createElement('span');
        span.innerHTML = new Date().getFullYear();
        document.querySelector(".copyright-year").appendChild(span);
      </script>
    </span>
  </div>

我使用获取语句检索我的 HTML 页脚并将其包含在每个页面上，但页脚中的 Date().getFullYear 脚本从未执行

I use a fetch statement to retrieve my HTML footer and include it on every page but the Date().getFullYear script in the footer never gets executed

javascript

fetch-api