当我使用javascript在不同的页面上时，如何在单独的header.html中更改活动的导航li？

<script>
function setActiveNav() {
  // 获取当前页面的URL
  var currentPageUrl = window.location.href;

  // 获取导航菜单的所有li元素
  var navItems = document.querySelectorAll('.nav li');

  // 遍历导航菜单的li元素
  for (var i = 0; i < navItems.length; i++) {
    var navItem = navItems[i];

    // 获取导航菜单项的链接URL
    var navItemUrl = navItem.querySelector('a').href;

    // 检查当前页面的URL是否与导航菜单项的URL匹配
    if (currentPageUrl === navItemUrl) {
      // 设置活动导航li的样式
      navItem.classList.add('active');
    } else {
      // 移除非活动导航li的样式
      navItem.classList.remove('active');
    }
  }
}
</script>

<script>
window.addEventListener('DOMContentLoaded', function() {
  setActiveNav();
});
</script>

<object data="header.html" width="100%" height="50"></object>

<ul class="nav">
  <li><a href="page1.html">Page 1</a></li>
  <li><a href="page2.html">Page 2</a></li>
  <li><a href="page3.html">Page 3</a></li>
</ul>