使用 Swup - 在每个文件上重新加载 javascript

Question

我使用 PHP 和 Swup 来刷新页面，而不刷新整个网站。 我在每个页面上使用 JavaScript 函数（在 exa 的 body 标记内），并使用 ajax 每 x 秒请求一次的函数。 代码示例：

<script defer>
    $(document).ready(function () {
    $.ajax({....});
// along with some more functions for handling the ajax request.
</script>

我有一个处理

const swup = new Swup();

代码的主 js 文件。 我的问题是，我该如何处理它，这样它将在每个页面的主体上加载js标签，当我更改页面时，它将卸载以前的请求/js（如果需要？）并且不会刷新全局js （它没有自动提款机）

谢谢。

Answer 1

由于我最近遇到了同样的问题，这是我的贡献：

Swup 无需完全重新加载即可更新页面，因此您不能依赖 DOMContentLoaded 或其他事件来触发您的代码 仅在初始加载时运行一次。

document.addEventListener('DOMContentLoaded', () => {
  // This only runs once, so you need some other event for triggering code
 });

相反，您可以通过注册在每次页面更改后触发代码 Swup 挂钩的处理程序。结合浏览器事件和 swup 挂钩， 您最终会得到一个用于可靠运行代码进行初始化的模板 页面上的元素：

document.addEventListener('DOMContentLoaded', () => {
  // This runs on initial load
});

swup.hooks.on('page:view', () => {
  // This runs after every page change by swup
});

避免内存泄漏

Swup 在内存中保留持久会话，因此对象会泄漏内存 不会自动清理，因为它们会在整页上 刷新。虽然这在大多数网站上不应该是问题，但请注意 在特殊情况下，您需要自行清理 swup内容之前：替换钩子。

function unload() {
  if (document.querySelector('#carousel')) {
    // carousel.destroy()
  }
}

swup.hooks.before('content:replace', () => unload());

来源：Swup 文档