Skip to content

Instantly share code, notes, and snippets.

@kingsj0405
Forked from lostsh/iframe-github.md
Created May 14, 2020 03:06
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save kingsj0405/9e563210e1daad5ba3854bcd4a096ba5 to your computer and use it in GitHub Desktop.
Save kingsj0405/9e563210e1daad5ba3854bcd4a096ba5 to your computer and use it in GitHub Desktop.
Iframe gist

Including iframe of an github (gists) embled script

So for include a github embled iframe into an iframe You may use hex code

see this exemple :
The github embled link : <script src="https://gist.github.com/lostsh/dfb8a51aeb3ad5d7e3cefbc66d72fa53.js"></script> and ths iframe who contain this embled : <iframe src="data:text/html;charset=utf-8,%3Cscript%20src%3D%22https%3A%2F%2Fgist.github.com%2Flostsh%2Fdfb8a51aeb3ad5d7e3cefbc66d72fa53.js%22%3E%3C%2Fscript%3E"></iframe> As you can see it work pretty good.

Explanation :
'%2f' --> '/'
'%3A' --> ':'
'%22' --> '"'
'%3E' --> '>'
'%3C' --> '<'
'%3D' --> '='

we only have to include the url whith hex code, and we may indicate to the iframe we are using text for to translate hex to ascii

so simply : charset=utf-8,

indicate the data type to interpret : data:text/html

To conclude into the src="" we have something like this :

data:text/html;charset=utf-8,%3Cscript%20src%3D%22https%3A%2F%2Fgist.github.com%2F[Git-Hub_Profile_Name]%2F[Gists_Link_.js]%22%3E%3C%2Fscript%3E

[Git-Hub_Profile_Name] --> your profile mine is 'lostsh'

[Gists_Link_.js] --> the link of your gists don't forget the '.js' at the end you may found this on your url broyser or on the square on the embled provided by github

if you want to make a butiful iframe check options at : https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe or : https://fr.wikipedia.org/wiki/%C3%89l%C3%A9ment_HTML#Jeu_de_cadres

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment