Ajax 页面加载器破坏了 Webflow 上的所有其他自定义代码

编程问答 2022-05-14

问题描述

我在为广播电台构建的 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,location.href);

这是 live site 的链接 和 read-only

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ajaxcustom-codejavascriptpageloadwebflow