The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何從 GitHub, Gist, JSBin, CODEPEN 載入 JavaScript 檔案

前幾天一個負責前端的同事遇到一個問題,在實驗一些 JavaScript 函式庫時,發現無法直接從 GitHub 載入 JavaScript 檔案,Google Chrome 的 Console 視窗 (在開發者工具裡) 會出現一段 Refused to execute script from 'https://raw.github.com/moment/moment/develop/min/moment.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. 的紅字 (紅字代表嚴重錯誤),而導致網頁無法正確執行,這篇文章將分享幾個注意事項,還有從 GitHub, Gist, JSBin, CODEPEN 載入 JavaScript 範例程式或函式庫的使用技巧。

我在研究過後發現,Google ChromeInternet Explorer 10 瀏覽器在載入網頁中的 JavaScript 資源時,會判斷該 JavaScript 的 Content-Type 標頭定義,如果回傳是 text/plain 就會導致載入的 JavaScript 無法執行,不過在 FirefoxSafari 瀏覽器並無此問題 ( 測試網頁 )。

解決問題的過程中,不但發現從 GitHub 載入 JavaScript 的一個小技巧,還錄製成影片,有興趣的人可以看看,如下影片: ( 建議用 YouTube 的 HD 模式觀看,以取得最佳影片品質 )

從 GitHub 載入 JavaScript 的注意事項

 

本篇文章還特別整理了 GitHub, Gist, JSBin, CODEPEN 四個網站的 JS 檔案載入方式。
注意:這裡的「載入」是指從你的網頁從任意網站網頁,載入放在這些網站上面的 JS 檔案。

1. 從 GitHub 載入 JavaScript 檔案

當你在 GitHub 上取得 Raw 格式的 JavaScript 檔案,雖然可以取得完整內容,不過 GiHub 網站回應的 Content-Type 卻是 text/plain 內容型態。我們以下方這個網址為例:

  • https://raw.github.com/moment/moment/develop/moment.js

當直接把該網址輸入在瀏覽器的網址列上,出現的是原始的 JavaScript 內容,如果用開發者工具 (Developer Tool) 來看 HTTP 封包內容,也可以發現回應的型態是 text/plain 內容類型。

然而,如果你將該網址變成用以下 HTML 語法載入,那就不行了 ( 示範網頁 ):

  • <script src="https://raw.github.com/moment/moment/develop/moment.js"></script>

網頁載入時,如果不開啟開發者工具,基本上看不出問題在哪,只會覺得:「我明明載入了 JavaScript 啊,為什麼 JavaScript 程式沒有執行呢?而且我把 JavaScript 輸入到網址列上,明明就有內容,怎麼不行呢?」然後陷入一種鬼打牆的焦慮狀態!

最好的方法,就是按下 F12 開啟瀏覽器的開發者工具 (Chrome 或 IE),然後切換到 Console (主控台) 頁籤,就會看到問題發生的詳細原因了,如下圖示:

解決的方法,當然是修改伺服器上的 Conten-Type 內容,把 text/plain 換成 application/javascript 即可。不過,我們又無法修改 GitHub 上面的伺服器設定,還好,GitHub 早就幫我們意識到這個問題,並網路上有位名叫 Ryan Grove 的仁兄,建立了另一個 rawgithub.com 網站,回應那些需要 GitHub 檔案原始內容的需求,最主要目的就是回應正確的 Content-Type 讓其他網頁也能夠正確載入 GitHub 上面的檔案。 ( 註: 真希望 GitHub 能夠主動將 Content-Type 改成 text/javascript )

所以,載入 GitHub 上面的 Raw 檔案時,你只要把網址列稍微修改一下即可。

如下網址,我有標註一個紅色的小數點:

  • https://raw.github.com/moment/moment/develop/moment.js

只要把網址上的這個小數點移除,就可以正確載入該 JavaScript 檔案:

  • https://rawgithub.com/moment/moment/develop/moment.js

注意: 此 rawgithub.com 網域並不歸 GitHub 所有,建議用在測試環境即可,切勿用於正式網站。

各位如果有興趣,也可以看我錄製好的一個簡短的教學短片:http://youtu.be/uOXueXGWqqM

 

2. 從 Gist 載入 JavaScript 檔案

Gist 是 GitHub 推出的一個服務,可以方便你用來分享各種程式碼片段 ( Code Snippets ),你只要輸入關鍵字進行搜尋,通常可以搜尋到各式各用程式語言的程式碼片段,非常實用。

當然,我們線上觀看原始碼內容是沒問題的,我們以下方這個網址為例:

因為一個 Gist 可能包含多個檔案,所以每一個檔案右上角都會有個 View Raw 的超連結,可以顯示該檔案的「純文字」內容。

想當然的,我們遇到的問題跟 GitHub 遇到的都一樣,解決的方式也差不多,把網址給換掉即可:

例如該檔案:

  • https://gist.github.com/jarcoal/6153740/raw/dadc0312dfd4a4d52fcfb0e136339fdcfe3f6fb6/moment-angular.js

換成以下網址即可:

  • https://rawgithub.com/jarcoal/6153740/raw/dadc0312dfd4a4d52fcfb0e136339fdcfe3f6fb6/moment-angular.js

 

3. 從 JSBin 載入 JavaScript 檔案

JSBin 我之前曾經撰文介紹過【 介紹好用工具:JS Bin ( 網站前端工程師的學習利器 ) 】,也是個很棒的線上編輯器。

例如我們的 JSBin 網址在此: http://jsbin.com/uyefat/1/edit

因為 JS BIn 提供了 HTML, CSS 與 JavaScript 三種編輯器,若要輸出整個頁面,其網址如下:

  • http://jsbin.com/uyefat/1

若你要單獨輸出 JavaScript 內容,就是修改網址結構,在最後加上 .js 即可:

  • http://jsbin.com/uyefat/1.js

 

不過,目前 ( 2013/8/10 ) 這一版 JS Bin 所輸出的 Content-Type 是 application/octet-stream,雖然不是標準的 application/javascript 內容型態,但還是可以成功的從任意網頁載入。

 

4. 從 CODEPEN 載入 JavaScript 檔案

CODEPEN 也是另一個方便管理程式碼片段的線上工具,假設我們要取得 http://codepen.io/Jackreichert/pen/heibs 這個 PEN 的 JavaScript 內容,則可以將網址列最後加上 .js 即可:

  • http://codepen.io/Jackreichert/pen/heibs.js

在 CODEPEN 輸出的 JavaScript,其 HTTP 回應的 Content-Type 是 text/javascript,是各瀏覽器可以接受的內容型態,所以直接用來載入網頁基本上沒啥問題。

 

相關連結