通过 WP REST API 获取的 WordPress 帖子中嵌入的 GitHub Gist答案

【问题标题】：GitHub Gist embedded in a WordPress post fetched through WP REST API通过 WP REST API 获取的 WordPress 帖子中嵌入的 GitHub Gist
【发布时间】：2020-12-30 17:27:17
【问题描述】：

在我的 WP 帖子中添加嵌入式 Gist 后，我在通过 REST API 获取它时看到的只是嵌入代码，意思是 <script src="https://gist.github.com/username/b5f6f2d0xxxxxxxdf9c90cbede0e.js"></script>。

有一些解决方案可以在 WordPress 中正确呈现嵌入式 Gist，但这些解决方案适用于 WordPress 网站，而不是仅从 WP 获取帖子的非 WP 网站。

知道如何解决这个问题吗？

编辑：根据this suggestion，我尝试从帖子中提取script 标签并将其重新注入DOM。但是，它仍然不起作用。实际上，即使只是将我的 Gist 脚本加载到变量中，然后将内容注入 DOM，它也不起作用。但它适用于任何其他脚本，例如：

const tag = document.createElement('script');
tag.src = 'https://my-site.com/test.js';
document.querySelector('body').prepend(tag);

但是使用我的 Gist URL 的完全相同的 sn-p 无法执行。

为什么注入 DOM 时 Gist 脚本不执行？

【问题讨论】：

你能提供更多细节吗？您正在构建什么非 WP 网站？你在使用 WP 有无头 CMS 吗？如果是，您使用的是什么前端技术？
this 有帮助吗？

标签： wordpress github wordpress-rest-api gist

【解决方案1】：

我相信这是因为 GitHub 使用 document.write 来插入嵌入式小部件。但是，在网页完全加载后，不应使用document.write。

// https://gist.github.com/nat/5fdbb7f945d121f197fb074578e53948.js

document.write('<link rel="stylesheet" ...')

GitHub 还提供了 jsonp (json + callback) api 来获取 gists。可以使用回调中的信息手动构建小部件。

// https://gist.github.com/nat/5fdbb7f945d121f197fb074578e53948.json?callback=callback001

/**/callback001({"description":"","public":true...

已经有一些项目可以做这些事情：https://github.com/mstapp/ajax-gist (jquery.ajax-gist.js)

【讨论】：

【解决方案2】：

页面加载后会呈现脚本，因此当您在浏览器中发出其余请求时，您只会收到包含发布信息的 JSON 响应。该脚本未执行，因为该页面尚未加载。

例如，看看这篇文章。在示例中，当他检索帖子时，您会收到如下所示的 json 响应

您的解决方案是解析响应并提取脚本标签。然后选择包含 GitHub gist 的脚本标签。

一旦你有了标签，你就可以将它嵌入到你的非 wp 网站中，只需嵌入标签。

【讨论】：

谢谢，我理解您所说的提取脚本标签然后将其重新注入 DOM。但是，一旦重新注入到 DOM 中，它是否也不会执行失败，也就是说只是在 DOM 中显示为“<script>...</script>”而不实际执行？
@drake035 我的印象是您是从服务器而不是客户端进行 api 调用，因此认为您可以从服务器提取并将其嵌入到您的页面中，然后简单地提供客户端请求时的页面。如果您需要在页面加载后从客户端执行此操作，似乎有许多解决方案，例如：stackoverflow.com/questions/19737031/…
谢谢。刚刚使用 stackoverflow.com/a/19737116/871404 (createElement, appendChild...) 将我的 Gist 插入 DOM。我现在可以准确地看到我插入的脚本标签。但是......它没有执行，它只是在那里什么都不做。我错过了什么吗？
@drake035 没有看到你的代码我不能说。我建议您创建一个新帖子，描述您在页面加载后添加脚本的工作，以及重现问题的最少代码量。如果你这样做，我相信会有几个人能够加入，因为这是一个更常见的问题。由于我正在睡觉并用手机打字，我将有一段时间无法回复??