如何在页面上动态嵌入整个 GitHub Gist？答案

【问题标题】：How can I embed an entire GitHub Gist dynamically on a page?如何在页面上动态嵌入整个 GitHub Gist？
【发布时间】：2011-06-12 02:36:00
【问题描述】：

我有一些包含 GitHub Gists 的 URL 的文本。我想查找这些 URL 并将 Gist 内联放在内容客户端。我尝试过的一些事情：

直接查找 GitHub 的 OEmbed API。

对于https://gist.github.com/733951，这意味着我执行 JSON-P 查找 https://github.com/api/oembed?format=json&amp;url=https%3A%2F%2Fgist.github.com%2F733951, 提取对象的html 属性，并将其添加到我的页面。问题这里是 GitHub 的 OEmbed API 只返回 Gist 的前三行。

使用jQuery-embedly plugin。

打电话

jQuery('a.something').embedly({allowscripts: true})

有效，但 Embedly 从 Gist 中剥离了格式。将其包装在 <pre> 标记中并没有帮助，因为没有换行符。

使用 GitHub 的 `.js` 版本的 gist。

https://gist.github.com/733951.js 使用document.write，所以当我动态需要它时，我无法控制页面的位置。（如果我可以将它写入 HTML 源代码，它会显示在正确的位置，但这一切都是在客户端完成的。）

【问题讨论】：

标签： javascript jquery github oembed

【解决方案1】：

我受到客户端 gist 嵌入的启发，并为此构建了一个 script.js hack 库（我还使用它来删除嵌入的链接样式并使用我自己的更适合我的页面的样式）...

它比嵌入 gists 和 pastes 更通用 - 实际上我正在使用它来动态加载一些第三方小部件/谷歌地图/推特帖子）...

https://github.com/kares/script.js

这是嵌入示例：

https://github.com/kares/script.js/blob/master/examples/gistsAndPasties.html

UPDATE：gist 的 API 从此支持 JSONP，jQuery 示例：

var printGist = function(gist) {
    console.log(gist.repo, ' (' + gist.description + ') :');
    console.log(gist.div);
};
$.ajax({ 
    url: 'https://gist.github.com/1641153.json', 
    dataType: 'jsonp', success: printGist 
});

【讨论】：

好吧，改变document.write 会起作用，虽然这看起来有点……风险。尽管如此，它至少是一个解决方案。

【解决方案2】：

我刚刚开始了一个名为 UrlSpoiler (on github) 的项目。它将帮助您动态嵌入要点。它托管在免费/共享平台上的 Heroku 上，因此您可以使用它，但我建议将您需要的代码复制到您自己的应用程序中以供生产使用。

【讨论】：

域已死，没有帮助
链接当前已失效。 @collindo
感谢@LucianNovo。林克现在还活着！几天前我更改了我的 github 用户名......对此感到抱歉。

直接查找 GitHub 的 OEmbed API。

使用jQuery-embedly plugin。

使用 GitHub 的 .js 版本的 gist。

使用 GitHub 的 `.js` 版本的 gist。