javascript - Ajax ページ ローダーが Webflow の他のすべてのカスタム コードを壊す

Question

ラジオ局用に構築している Webflow サイトで奇妙な問題が発生しましたが、解決策がどこにも見つからないので、助けを求めようと思いました。

この ajax ページ ローダー コードを使用して、サイトの閲覧中にラジオ ストリームを連続再生できるようにしています。そのコードは、何かをクリックしたときに他のすべてのカスタムコードを壊すことを除いて機能します。コンソールにエラーはなく、別のコード エディター間でコードを移動しようとしましたが、問題は解決しません。コードが何らかの形で Webflow と衝突するかどうかはわかりませんが、コードは純粋なバニラ JavaScript であるため、この問題は私を怒らせています。

誰かが問題が何であるかを知っている可能性がある場合は、お気軽に解決策を共有してください。本当に感謝します！ajax コードは次のとおりです。

let main = document.querySelector('main');

window.addEventListener('popstate', function (e) {
  requestPage(e.state, false);
});

function requestPage(url, push) {
  let xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      main.innerHTML = xhr.responseText;
      var title = (/<title>(.*?)<\/title>/m).exec(xhr.responseText)[1];
      var headers = document.querySelectorAll('.header');
      var footers = document.querySelectorAll('.footer');
      if (headers.length > 1) {
        headers[1].remove();
      };
      if (footers.length > 1) {
        footers[1].remove();
      };
      attachLinkClickHandlers(main);

      document.title = title;
      if (push)
        history.pushState(url, document.title, url);
    }
  };

  xhr.open('get', url, true);
  xhr.send();
}

function attachLinkClickHandlers(parent) {
  let links = parent.querySelectorAll('a:not([href^="http"])');

  [].forEach.call(links, function (link) {
    link.addEventListener('click', function (e) {
      requestPage(link.href, true);

      e.preventDefault();
      return false;
    });
  });
}

attachLinkClickHandlers(document);

history.replaceState(location.href, document.title, location.href);

ライブ サイト と読み取り専用へのリンクは次のとおりです。