The Will Will Web | 如何從 GitHub, Gist, JSBin, CODEPEN 載入 JavaScript 檔案

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,是各瀏覽器可以接受的內容型態,所以直接用來載入網頁基本上沒啥問題。

 

相關連結