Question

这个问题似乎令人困惑，所以让我澄清一下。

Github允许您查看仓库中文件的源代码。我想将它们包含在iframe中，但我不确定如何并且怀疑某人之前已经这样做了。

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

Answer 1

GitHub页面本身不会直接放在iframe中because of the X-Frame-Options: deny HTTP header)。

GET /repos/:owner/:repo/contents/:path

赞：https://api.github.com/repos/ileathan/hubot-mubot/contents/src/mubot.coffee。

您应该可以put that content in a iframe (as in this answer)

Answer 2

我刚刚找到了使用Gist-it

执行此操作的方法

用法

获取github文件网址并在其前面添加http://gist-it.appspot.com，并将结果嵌入标记中：
<script src="http://gist-it.appspot.com/http://github.com/$file"></script>

这是我刚刚做的一个测试。作品！ :)

Answer 3

这是如何通过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/

Answer 4

您需要对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>

有没有办法将github代码嵌入到iframe中？

4 个答案: