用 jQuery load 跨 HTML 檔使用重覆的 HTML 內容

寫網頁到一定規模後, 會抽出重覆的 JavaScript 到獨立的 JavaScript 檔, 再用 <script src="FILE.js"></script> 載入, 以供不同 HTML 使用; CSS 則是用 <link rel="stylesheet" type="text/css" href="FILE.css"> 載入外部檔案。那 HTML 怎麼辦?

若是會寫 PHP 的人, 會使用 include 載入重覆使用的 HTML; 用 Python/Ruby/Perl 寫 CGI 的話, 會搭配 web framework 內 template language 的語法, 所以也沒問題。但若是只會寫 HTML + CSS + JavaScript 的人該怎麼辦? 查了一下, 發覺用 jQuery load 可以輕易做到 [*1]。唯一的問題是, 在本機電腦實作, 用瀏覽器開啟本機檔案後會發現行不通。有如下的 JavaScript 錯誤訊息:

XMLHttpRequest cannot load file:///C:/.../FILE.html. Cross origin requests are only supported for HTTP.

這是因為瀏覽器基於安全考量, 禁止 JavaScript 讀取本機檔案。

解套方式是在本機跑 web server, 透過 http (而不是 file://) 讀取檔案。

於是問題變成: 如何讓這類不擅長程式設計或系統管理的人, 能在自己的電腦測試 jQuery load? 畢竟會有這種需求的人, 大概也不擅長在 Windows 或 Mac 裝 apache2 或 lighttpd。從這裡看到有人推薦用 mongoose。

作法如下:

1. 下載 mongoose 執行檔
2. 執行檔放在網頁目錄下
3. 執行它就可以連到 port 8080 看到結果 (即連往 http://localhost:8080/ 瀏覽目錄下的網頁)。

也可參考官網的教學了解更多設定。

要關掉 mongoose 的話, 可以從右下角的系統選單找到 mongoose 的圖示, 按右鍵再選 Exit。或從系統管理員直接結束它。

Btw, 另一個作法是安裝 Python, 然後跑 SimpleHTTPServer:

python -m SimpleHTTPServer 8080

不過得和非程式設計非系統管理背景的人解釋一下命令列就是了。

備註

*1: 事實上這個作法沒有 PHP include 或 CGI-based + template language 的作法好, 因為網頁內容不是一次載入, 而是透過 AJAX 補上, 會延遲內容出來的時間。不過作小東西或雛型的時候, 可忽略這一點負擔。