All geek questions in one place

Dynamically load Gist embed?

I'm not sure where to look for this. I want to create a drop-down list to select a Gist identifier and then generate it (paste) in a placeholder div.

I used to have scripts generated but hidden, and just showing them using rel ID. But it is extremely slow with more than three built-in Gist.

I tried getScript , but I think that document.write in the code to insert the Gist just doesn't let it crawl.

Can someone point me in the right direction?

+4
source share
3 answers

The problem here is that the document.write used by the built-in JavaScript Gist does not execute after the page loads. To get around this, create an iframe, set its body to Gist embed JS, and set the onload event to tell parents to resize the iframe accordingly. Here is my solution: https://gist.github.com/1748966

+6
source

Although this may have been the best answer at the time, I think it is better now.

For a given value, for example. https://gist.github.com/anonymous/5446951 you can access the JSON object containing the HTML markup and CSS URI for Gist at https://gist.github.com/anonymous/5446989.json - it looks something like So:

 { "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 Gist without 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); }
+7
source

I have never tried this, but here are some examples using JSONP:

Can you try them and see if they work for you?

If you want to skip PHP, you can look at this libarary:

and then access them through regular jQuery AJAX calls.

0
source

Source: https://habr.com/ru/post/1394925/

More articles:


All Articles