I'm not sure where to look for this. I'm looking to create a drop down to select a Gist ID and then generate it (embed) in a placeholder div.
I previously had the scripts generated, but hidden, and simply showed them by rel ID. But this is extremely slow with even more than three Gist embeds.
I've tried getScript, but I guess the document.write in the Gist embed code just doesn't let it slide.
Can someone point me in the right direction?
The problem here is that document.write used by the Gist embed JavaScript is not executed after page load. To get around this, create an iframe, set its body to the Gist embed JS, and set an onload event to tell the parent to resize the iframe accordingly. Here is my solution: https://gist.github.com/1748966
While that may have been the best answer at the time, I believe there's now a better one.
For a given gist, e.g. https://gist.github.com/anonymous/5446951, you can access a JSON object containing the HTML markup and CSS URI for the Gist at https://gist.github.com/anonymous/5446989.json - it looks something like:
{
"description": ...,
"public":true,
...
"div": <HTML code>,
"stylesheet": <URI of CSS file>
}
In fact, you can get this data as JSONP: https://gist.github.com/anonymous/5446989.json?callback=callback12345
So, to dynamically load a Gist without an iframe:
function loadGist(element, gistId) {
var callbackName = "gist_callback";
window[callbackName] = function (gistData) {
delete window[callbackName];
var html = '<link rel="stylesheet" href="' + escapeHtml(gistData.stylesheet) + '"></link>';
html += gistData.div;
element.innerHTML = html;
script.parentNode.removeChild(script);
};
var script = document.createElement("script");
script.setAttribute("src", "https://gist.github.com/" + gistId + ".json?callback=" + callbackName);
document.body.appendChild(script);
}
jQuery, which should make the JSONP call a lot easier.I've never tried this, but here are some examples using JSONP:
Can you try these and see if they works for you?
If you want a PHP past-through, you can look at this libarary:
and then access that through regular jQuery AJAX calls.
