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

Question

这个问题可能看起来很混乱，所以让我澄清一下。

Github 让您可以查看存储库中文件的源代码。我想将它们包含在 iframe 中，但我不确定是如何做的，并且怀疑有人之前已经这样做过。

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

Answer 1

GitHub 页面本身不会直接放在 iframe 中 (.

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

的方法

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>

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

Answer 3

您需要修改 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>

Answer 4

这是一个具体示例，说明如何通过 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 代码嵌入到 iframe 中？

Is there a way to embed github code into an iframe?

iframe

github