Вопрос может показаться запутанным, поэтому позвольте мне уточнить.
Github позволяет увидеть исходный код файлов в репозитории. Я хочу включить их в iframe, но не знаю, как это сделать, и подозреваю, что кто-то уже сделал это раньше.
В моем случае я хочу добавить https://github.com/ileathan/hubot-mubot/blob/master/src/mubot.coffee в iframe, чтобы с моего веб-сайта люди могли видеть код по мере его развития.
Сама страница GitHub не будет помещена непосредственно в iframe (из-за HTTP-заголовка X-Frame-Options: deny).
Это оставляет вам API GitHub для контента.
GET /repos/:owner/:repo/contents/:path
Например: https://api.github.com/repos/ileathan/hubot-mubot/contents/src/mubot.coffee.
Вы должны иметь возможность поместить этот контент в iframe (как в этом ответе)
Я только что нашел способ сделать это с помощью Gist-it.
Применение
Возьмите URL-адрес файла github и добавьте к нему префикс http://gist-it.appspot.com и вставьте результат внутри тега:
<script src="http://gist-it.appspot.com/http://github.com/$file"></script>
Вот тест, который я только что сделал. Работает! :)
Вам нужно немного взломать 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 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/
