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

问题

The question may seem confusing so let me clarify.

Github lets you see the source code of a files in a repo. I want to include them in iframes but am unsure how and suspect someone has already done this before.

In my case I want to add https://github.com/ileathan/hubot-mubot/blob/master/src/mubot.coffee to an iframe so that from my website people can see the code as it evolves.

回答1:

A GitHub page itself wouldn't be put directly in a iframe (because of the X-Frame-Options: deny HTTP header).

That leaves you with the GitHub API for contents

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

Like: https://api.github.com/repos/ileathan/hubot-mubot/contents/src/mubot.coffee.

You should be able to put that content in a iframe (as in this answer)

回答2:

I just found a way to do this using 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>

Here's a test I just made. Works! :)

回答3:

You'll need to hack the iframe and css a bit to get it to work without tags in your document, but it's possible:

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>

回答4:

Here's a concrete example of how this can be done via the GitHub API. We request the encoded content and insert it directly into the 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>

Here's the code in action https://jsfiddle.net/j8brpdsg/2/

来源：https://stackoverflow.com/questions/28338017/is-there-a-way-to-embed-github-code-into-an-iframe

标签

iframe

github