# 为每次页面更改装饰CookedElement？ **URL:** \ **Category:** Development\ **Created:** [2022年一月8日 04:54 UTC](https://meta.discourse.org/t/decoratecookedelement-for-each-page-change/214218 "2022-01-08T04:54:17Z")\ **Posts on this page:** 6\ **Page:** 1

**Author:** ![jimkleiber](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jimkleiber/32/121814_2.png) [@jimkleiber](https://meta.discourse.org/u/jimkleiber)\ **Post date:** [2022年一月8日 04:54 UTC](https://meta.discourse.org/t/decoratecookedelement-for-each-page-change/214218/1 "2022-01-08T04:54:17Z")

我正在尝试使用 Mediaelement.js 库来覆盖自定义音频 onebox，并且在页面加载/刷新时它能正常工作。但是，当我在不同主题之间导航时，它似乎没有重新加载，而是显示了原生的 Discourse 音频 onebox。加载/刷新时： ![image](https://global.discourse-cdn.com/meta/original/3X/c/d/cd90a2e43ceb19d2e8e3757c29607679b5d5b9c2.png) 如果我然后导航到另一个主题： ![image](https://global.discourse-cdn.com/meta/original/3X/0/d/0d66cf09db9427ee42139408e71dce8b0afa89f1.png) 我很确定我在 [mejs 加载](https://github.com/mediaelement/mediaelement/blob/d8a667fd65560093fb227700a82805600ec9e8e3/docs/usage.md) 方面做错了什么，但又觉得可能不是，并且我必须对 onPageChange 做一些花哨的事情。 **``** ```javascript ``` **`css`** ```css @import "https://cdnjs.cloudflare.com/ajax/libs/mediaelement/5.0.4/mediaelementplayer.min.css"; ``` ![image](https://global.discourse-cdn.com/meta/original/3X/7/8/789e8bd4152f6fcb19c81b4ae8ebaf2417a27307.png) 有人有什么建议，如何调整才能让它在每次页面加载时自动重新加载吗？ ---

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\ **Post date:** [2022年一月11日 18:58 UTC](https://meta.discourse.org/t/decoratecookedelement-for-each-page-change/214218/2 "2022-01-11T18:58:07Z")

由于你在 #Development 频道发帖，这篇回复可能会稍长一些。不过，内容非常通用，主要是在解释 Discourse 中应遵循的模式，而不论你打算集成哪个库，或者想要针对哪些帖子元素。恰好，这里以你选择的脚本作为主要示例。 MediaElement 提供了两种初始化新音频播放器的方式： 1. 你可以给元素添加一个 CSS 类和一些属性，它会自动为你处理。 2. 你可以手动初始化它。你目前使用的是第一种方式，所以我们先来看看这种方式。当某个脚本提供“元素自动初始化”功能时，这通常是脚本作者为了提升用户体验而添加的便利功能。在脚本内部，作者通常会监听文档加载事件（document load event），并对那些具有指定类名或属性的 DOM 元素执行相应操作。那么，为什么它不工作呢？正如你所见，它在初次页面加载时运行正常，但在随后的应用内导航中却失效了。这是怎么回事？简短的回答是：Discourse 是一个单页应用（Single-Page Application）。像 `` 和 `` 这样的标签只会被发送一次。因此，从某种意义上说，文档只加载了一次。所以，当你在初始页面加载后进行导航时，不会再有原生的“加载”事件被触发。请记住，文档在初次页面查看时已经加载完成。此后的所有操作都由 Discourse 自行处理。当然，这并不意味着在后续导航中没有任何事件被触发。然而，这些是 Discourse 特有的事件。因此，第三方脚本作者无法提前知晓这些事件。想象一下，如果你是一个脚本作者，需要适配成百上千个不同的平台，那会怎样？这显然不可行，对吧？所以，我们无法使用脚本作者精心添加的那种“便利功能”。接下来该怎么办？别忘了，我们仍然可以手动在目标元素上初始化脚本。让我们试试这个方法。我之前提到过，浏览器层面只有一个原生的“加载”事件，但像 Discourse 这样的平台如果没有自己的事件系统，就无法良好运行。例如，插件 API 提供了一个方法，可以[在虚拟页面导航时触发脚本](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L614-L622)。你应该使用这个方法吗？不。这个方法非常适合用于分析统计等场景。但对于只处理 `