jquery - jQuery - 动态加载 Gist 嵌入？

Question

我不知道去哪里找这个。我正在寻找创建一个下拉列表来选择一个 Gist ID，然后在占位符 div 中生成（嵌入）它。

我以前生成了脚本，但被隐藏了，只是通过 rel ID 显示它们。但这对于超过三个 Gist 嵌入来说是极其缓慢的。

我试过getScript了，但我猜document.writeGist 嵌入代码中的代码不会让它滑动。

有人可以指出我正确的方向吗？

score 7 · Accepted Answer

这里的问题是 Gist 嵌入 JavaScript 使用的 document.write 在页面加载后没有执行。为了解决这个问题，创建一个 iframe，将其主体设置为 Gist embed JS，并设置一个 onload 事件来告诉父级相应地调整 iframe 的大小。这是我的解决方案：https ://gist.github.com/1748966

score 7 · Accepted Answer

虽然这可能是当时最好的答案，但我相信现在有更好的答案。

对于给定的 gist，例如https://gist.github.com/anonymous/5446951 ，您可以在 https://gist.github.com/anonymous/5446989访问包含 Gist 的 HTML 标记和 CSS URI 的 JSON 对象.json - 它看起来像：

{
    "description": ...,
    "public":true,
    ...
    "div": <HTML code>,
    "stylesheet": <URI of CSS file>
}

实际上，您可以将这些数据作为 JSONP 获取：https ://gist.github.com/anonymous/5446989.json?callback=callback12345

因此，要动态加载没有 iframe的 Gist ：

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);
}

score 0 · Accepted Answer

我从未尝试过，但这里有一些使用 JSONP 的示例：

你可以试试这些，看看它们是否适合你？

如果你想要一个 PHP 过去，你可以看看这个库：

https://github.com/dsyph3r/github-api3-php

然后通过常规的 jQuery AJAX 调用访问它。

jquery - jQuery - 动态加载 Gist 嵌入？

3 回答 3

Related

Reference