有没有办法将github代码嵌入到iframe中？
这个问题可能看起来令人困惑,所以让我澄清一下.
Github允许您查看仓库中文件的源代码.我想将它们包含在iframe中,但我不确定如何并且怀疑某人之前已经这样做了.
在我的情况下,我想将https://github.com/ileathan/hubot-mubot/blob/master/src/mubot.coffee添加到iframe,以便从我的网站上人们可以看到代码的演变.
以下是如何通过 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中(因为X-Frame-Options: denyHTTP标头).
这使您获得了内容的GitHub API
GET /repos/:owner/:repo/contents/:path
例如:https://api.github.com/repos/ileathan/hubot-mubot/contents/src/mubot.coffee.
您应该能够将该内容放在iframe中(如此答案)
我刚刚找到了一种使用Gist-it做到这一点的方法
用法
获取一个 github 文件 url 并在它前面加上http://gist-it.appspot.com并将结果嵌入到一个标签中：
Run Code Online (Sandbox Code Playgroud)<script src="http://gist-it.appspot.com/http://github.com/$file"></script>
这是我刚刚做的一个测试。作品！:)
小智 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>
| 归档时间： |
|
| 查看次数： |
8352 次 |
| 最近记录： |