时间戳

首页 > 解决方案 > 从 MD 执行 JavaScript - 以编程方式创建的页面

javascript - 从 MD 执行 JavaScript - 以编程方式创建的页面

问题描述

是否可以在从 .md 以编程方式创建的 MarkdownRemark 页面中执行 JavaScript？

我想嵌入一个来自 EmbedSocial 的照片库，它需要一个带有类名和标签的照片。

它在 .md 文件中：

<div class='embedsocial-album' data-ref="abcdefghijklmnopqrstuv123456789"></div>
<script>(function (d, s, id) { var js; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/embedscript/ei.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialScript"));
</script>

它在我的模板文件中，包含 GraphQL 查询结果：

<div dangerouslySetInnerHTML={{ __html: post.html }} />

但我意识到，dangerouslySetInnerHTML不执行在 MD 中找到的 JavaScript。

我将如何解决这个问题？

标签： javascriptreactjsmarkdowngatsby

解决方案

我建议在这个用例中使用gatsby-remark-embed-snippet。然后，您可以将图库包含在 eg`embed:embedsocial.js`中，并将您的代码放在一个名为的文件中，该文件embedsocial.js是您的代码库的一部分。

能够从 Markdown 将 JavaScript 直接包含到页面中听起来像是一种安全风险（任何控制 Markdown 的人都可以将代码注入您的站点）；有一个预定义的片段要安全得多。

此外，如果 EmbedSocial 将来更改其 API，您可以在一个地方更新图库的所有实例。

推荐阅读