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

问题描述

在我的 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 的完全相同的代码段无法执行。

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

解决方法

我相信这是因为 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)

,

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

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

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

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