logo标签列表

有没有一种方法可以将Github代码嵌入到iframe中？

iframegithub
12

这个问题可能有些令人困惑，所以让我澄清一下。

Github 可以让你查看存储库中文件的源代码。我想将它们包含在 iframe 中，但不确定如何操作，而且怀疑已经有人做过这个操作。

在我的情况下，我想将https://github.com/ileathan/hubot-mubot/blob/master/src/mubot.coffee 添加到一个 iframe 中，以便从我的网站上的人可以看到代码的演变。

4个回答
7
现在是凌晨4:30，我需要去睡觉，所以现在无法检查，但返回的内容是否使用我的API密钥加密还是仅进行了Base64编码？顺便说一下，非常感谢。 - Banned_User
在上述链接中，他们指出：“使用REST API在存储库中创建、修改和删除Base64编码的内容。” - andreagalle
@andreagalle 很好的观点。我已经编辑了答案，包括那个标题。 - VonC
6
这是一个具体的例子，展示如何通过GitHub API实现。我们请求编码后的内容，并将其直接插入到iframe中。
<iframe id="github-iframe" src=""></iframe>
<script>
    fetch('https://api.github.com/repos/ileathan/hubot-mubot/contents/src/mubot.coffee')
        .then(function(response) {
            return response.json();
        }).then(function(data) {
            var iframe = document.getElementById('github-iframe');
            iframe.src = 'data:text/html;base64,' + encodeURIComponent(data['content']);
        });
</script>

以下是代码示例 https://jsfiddle.net/j8brpdsg/2/

非常好，但如果您尝试将一些 Github 代码嵌入到您的页面中，API 返回的结果会像这样混乱：https://imgur.com/a/ycmZmlq。 - Boris Burkov
5
您需要对iframe和css进行一些修改，才能在文档中不使用标签的情况下让其正常工作，但这是可能的。参考链接：https://www.arctype.co/blog/embedding-github-gists-via-iframe。
 <iframe frameborder=0 style="min-width: 200px; width: 60%; height: 460px;" scrolling="no" seamless="seamless" srcdoc='<html><body><style type="text/css">.gist .gist-data { height: 400px; }</style><script src="https://gist.github.com/sundbry/55bb902b66a39c0ff83629d9a8015ca4.js"></script></body></html>'></iframe>
5
我刚刚发现了一种使用 Gist-it 实现此功能的方法。

Usage

Take a github file url and prefix it with http://gist-it.appspot.com and embed the result within a tag:

<script src="http://gist-it.appspot.com/http://github.com/$file"></script>
这是我刚刚制作的一个测试，成功了！ :) 输入图像描述
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接