Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Dynamic Gist Embedding
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>Dynamic Gist Embedding</title>
<label for="gistList">Gists</label>
<select id="gistList">
<option value="">Select a Gist</option>
<option value="906758">Get a Twitter user's avatar using PHP</option>
<option value="785770">How to PHP regex match an HTML document's title</option>
<option value="785766">How to PHP regex match an HTML document's meta description</option>
<div id="gistZone"></div>
<script type="text/javascript">
document.getElementById("gistList").onchange = function(e) {
if ( {
// Create an iframe, append it to this document where specified
var gistFrame = document.createElement("iframe");
gistFrame.setAttribute("width", "100%"); = "gistFrame";
var zone = document.getElementById("gistZone");
zone.innerHTML = "";
// Create the iframe's document
var gistFrameHTML = '<html><body onload="parent.adjustIframeSize(document.body.scrollHeight)"><scr' + 'ipt type="text/javascript" src="' + + '.js"></sc'+'ript></body></html>';
// Set iframe's document with a trigger for this document to adjust the height
var gistFrameDoc = gistFrame.document;
if (gistFrame.contentDocument) {
gistFrameDoc = gistFrame.contentDocument;
} else if (gistFrame.contentWindow) {
gistFrameDoc = gistFrame.contentWindow.document;
console.log("iframe added");
function adjustIframeSize(newHeight) {
var i = document.getElementById("gistFrame"); = parseInt(newHeight) + "px";
console.log("size adjusted", newHeight);

what do is!!!??

Thanks for this! Exactly what I was looking for!

Just a tip: if you add

<base target="_parent" />

after in gistFrameHTML, it will make the links work. :)

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