Dynamically embedding Gists

I updated my site to utilize html5 history and ajax recently. One of the challenges I faced was how to handle Gist embeds. Since they only consist of a single script tag it initially seemed like there wasn’t a lot to go on. Not to mention that it would trigger a document.write() … and that would naturally ruin my site if it were triggered dynamically.

After looking some more at this embed system I found out that the Gist embed also has a json version which gives you its HTML content and a link to a stylesheet that it must load. With this info, I made a small jQuery snippet that would replace all these script elements with the actual HTML from the Gist

Please do note that I used a function called add_stylesheet_once in the script displayed above. This is purely because I didn’t want the same stylesheet to embedded many, many times after navigating a few pages containing Gists.

I'm a webdeveloper based in Oslo, Norway. I currently work with web development at Nettmaker.

I would like to change the world, but they won't give me the source…


I haven’t had COR issues, however it does now present issue about application/json mimetype not being executable. In light of this I probably would have solved it slightly differently if implemented today – loading the json through PHP (caching it) and adding it in the ajax request to begin with for example

Leave a Reply

Your email address will not be published. Required fields are marked *