Skip to content

Instantly share code, notes, and snippets.

@lostsh
Last active May 14, 2020 03:06
Show Gist options
  • Save lostsh/dfb8a51aeb3ad5d7e3cefbc66d72fa53 to your computer and use it in GitHub Desktop.
Save lostsh/dfb8a51aeb3ad5d7e3cefbc66d72fa53 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