Ленивая загрузка файлов github для отображения исходного кода на веб-сайте - PullRequest
Новая
       15

Ленивая загрузка файлов github для отображения исходного кода на веб-сайте

1 голос
/ 15 апреля 2011

У меня есть пара суть, которые мне нужно включить в пост на сайте, чтобы продемонстрировать исходный код.В настоящее время я встраиваю каждый из множества элементов в разных местах HTML тегами сценария, однако это будет блокирующий вызов.Итак, есть ли способ динамически загружать списки и вставлять их в определенные моменты времени.

Я пробовал что-то вроде ниже: - 

<html>
<body>
<div id="bookmarklet_1.js"></div>
<div id="bookmarklet_2.js"></div>
<div id="bookmarklet_3.js"></div>

var scriptMap = {'bookmarklet_1.js' : 'https://gist.github.com/892232.js?file=bookmarklet_1.js',
                 'bookmarklet_2.js' : 'https://gist.github.com/892234.js?file=bookmarklet_2.js',
                 'bookmarklet_3.js' : 'https://gist.github.com/892236.js?file=bookmarklet_3.js'};

var s, scr, holder; 
for(s in scriptMap){
    holder = document.getElementById(s);
    scr= document.createElement('script');
    scr.type= 'text/javascript';
    scr.src= scriptMap[s];
    holder.appendChild(scr); 
 }
 </script>
 </body>
 </html>

Выше не работает для меня,Кажется, что каждый сценарий выполняет document.write внутри для написания кода CSS и soure.Кто-нибудь пробовал это раньше или заработал?

Ответы [ 3 ]

2 голосов
/ 31 мая 2011

Я начал проект именно для этой цели. Динамически встроенные списки

Попробуйте сейчас: http://urlspoiler.herokuapp.com/gists?id=992729

Используйте указанный выше URL в качестве источника динамически создаваемого iframe или добавьте & format = html, чтобы получитьфрагмент HTML-кода Gist через ajax, затем поместите его в любое место.(Суть в приведенном выше URL также является документацией по использованию этого проекта.)

1 голос
/ 21 мая 2011

Я сам хотел сделать то же самое (с добавлением даже удаления ссылки по умолчанию в стиле gist) - в итоге я создал «универсальный» загрузчик скриптов, который обрабатывает document.write вызовы:

https://github.com/kares/script.js

Вот как это можно использовать для встраивания гист (и пирожков):

https://github.com/kares/script.js/blob/master/examples/gistsAndPasties.html

0 голосов
/ 24 апреля 2013

Теперь вы можете получить HTML + CSS напрямую, используя JSONP.

Я написал более полный ответ в ответ на этот вопрос , но ключ в том, что вы можете получить HTML + CSSиспользуя JSONP.

Например: https://gist.github.com/anonymous/5446989.json?callback=callback12345

callback12345({
    "description": "Function to load a Gist without an iframe",
    "public": true,
    ...
    "div": <HTML code>,
    "stylesheet": <URL of CSS file>
})
...