懶惰加載github gist文件在網站上顯示源代碼

我有幾個要點，我需要包括在網站上的帖子展示源代碼。目前，我正在使用腳本標記在HTML中的各個位置插入多個要點中的每一個，但是，這將是一個阻塞呼叫。那麼，有沒有辦法動態加載要點並及時粘貼特定的點。懶惰加載github gist文件在網站上顯示源代碼

我試過類似下面： -

<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和索裏的代碼。有沒有人嘗試過這或之前工作？

來源

2011-04-15 Ravikiran

我自己想要做同樣的事情（加連除去默認要點風格鏈接） - 最終建立一個「通用」的腳本加載器處理document.write電話：

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

這裏有一個如何使用它嵌入學家（和餡餅）：

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

來源

2011-05-21 10:57:08 kares

我確切地啓動了一個項目用於此目的。 Dynamically-embedded Gists

現在就來試試：http://urlspoiler.herokuapp.com/gists?id=992729

使用上述URL作爲一個動態創建的iframe的SRC，或添加&格式= HTML獲得主旨HTML通過AJAX的片段，然後把它放在任何你想要的。（上面url中的要點也恰好是如何使用此項目的文檔。）

來源

2011-05-30 20:58:04 colllin

這個URL被拋出服務器錯誤。 – 2012-06-16 20:38:01

謝謝。回答更正新的網址。我沒有看到大量的流量，所以我放棄了域名。該服務仍然有效;將無限期地託管在heroku的免費套餐上。或從github複製代碼並自己託管它。 – colllin 2012-06-21 16:08:56

也可以從github項目（https://github.com/colllin/urlspoiler）中竊取相關代碼， – colllin 2014-09-11 20:42:52

您現在可以直接使用JSONP獲取HTML + CSS。

我爲this question寫了一個更完整的答案，但關鍵是您可以使用JSONP獲取HTML + CSS。

例如：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> 
})

來源

2013-04-23 20:21:53 cloudfeet

懶惰加載github gist文件在網站上顯示源代碼

回答

相關問題