如何白名单化任意 HTML 属性?

谢谢 Jeff,我过去曾成功白名单化 iframe,但这并非我所期望的行为。

你好 Rafael,
我想我可能没表达清楚。这个帖子中有一个示例:

在该链接底部的我的帖子中,显示着“加载中(Loading)”。这是一个带有特定属性的 div,旨在触发我放置在管理主题 /body 部分(脚本放置处)的外部脚本,并通过 JavaScript 生成内容(填充统计图表)。

最终效果应与我之前在主题顶部链接的 CodePen 示例一致,即数据生成后的样子。

自定义数据属性在 Discourse 中默认已被白名单化,不会像 id 或 class 那样从 div 中被移除。

我的问题是:如何使这些外部脚本执行,并根据这些属性在空的 div 中生成数据?基于这些属性,它们可以因主题或帖子而异,从而触发脚本显示由这些外部脚本生成的不同数据。

总结一下我的意图

在管理 > 自定义 > 主题“编辑 CSS/HTML” 部分放置的外部脚本:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://bloodmallet.com/js/bloodmallet_chart_import.min.js"></script>

用户或我在编辑器中输入的内容:

<div 
  data-bloodmallet="chart"
  data-wow-class="shaman" 
  data-wow-spec="elemental" 
  data-chart-engine="highcharts"
  data-tooltip-engine="wowhead"
  data-type="trinkets"
  data-azerite-tier="all"
  data-fight-style="patchwerk"
  data-entries="7"
  data-background-color="#343a40" 
  data-font-color="#f8f9fa" 
  data-axis-color="#828282"
  data-language="en"
>加载中...</div>

当找到该 div 并执行外部 JavaScript(即我在管理端放置的脚本)后,基于这些数据属性生成内容时的输出效果:

我表达清楚了吗?如果我没能解释清楚,请见谅。作为双语者,我有时会让事情听起来更复杂。