Category: HTML5

最近又在寫程式爬網頁轉電子書,其中一件麻煩事是圖檔。 之前我的做法是依據 img src 下載圖檔,以自定檔名(通常會用流水號)寫入該電子書的附檔資料夾統一儲存,再將 img src 改為圖檔相對路徑。 這回處理的網頁引用圖片不多,每篇頂多兩三張,照片也不大,故我想試試更簡單的做法 - 將圖檔直接轉...

瀏覽器初到新網站時,會試著下載名為 Favicon (Favorite Icon) 的網站代表圖示,用在地址列、頁籤、書籤(我的最愛)上。 若網頁沒特別指定,瀏覽器預設會抓取網站根路徑的 /favicon.ico 檔案,找不到就算了不會觸發錯誤。 一般我們不為會為測試、開發用網站設計圖示,但瀏覽器...

踩到一個地雷。從舊專案搬了網頁到新專案,有些文字顯示不出來,花了點時間追查,發現是因為某 jQuery 元件用了 <span class="..." /> 這種不合法寫法,舊專案為相容 IE 還在用 jQuery 用 1.12 版,搬到改用 jQuery 3.6 的新...

Server-Sent Events 算是蠻古老的技術,可實現伺服器端對瀏覽器的單向串流傳輸,目前除了 IE,所有瀏覽器都支援。 但提到網站串流傳輸,不是已經有 WebSocket、SignalR 了,Server-Sent Events 還有實用價值嗎?有! 如果是伺服器對瀏覽器的單向串流傳輸,S...

這個系列是「將 IE-Only 網站翻修到 Chrome/Edge 相容」過程的瑣碎筆記,有參與古蹟維護的朋友請進。 今天說說網頁裡若出現只剩 IE 支援的 showModalDialog() 要怎麼修改?從 Chrome 43 跟 Firefox 56 之後,showModalDialog API...

今天這篇屬於前端開發的單兵基本教練,練習為耗時的 AJAX 呼叫製作載入中狀態顯示,如以下效果: 針對較耗時的 AJAX 呼叫,在等待結果回傳期間顯示轉圈圈之類的載入動畫,安撫使用者情緒提供明確的執行狀態回饋,同時封鎖網頁介面並防止使用者在等待期間繼續操作造成動線混亂。這種效果相信大家一定都看過,...

今天接到的小任務 - 將第三方提供網頁版型樣式改成 ASPX 動態網頁,意外學到 HTML 的冷知識。 第三方系統歷史悠久,我拿到的 HTML 採用 XML 格式,最上方宣告為 <?xml version="1.0"?>,至今已不常見:(以下為用於重現問題的簡化版本)...

同事報案,他的電腦使用某個靠 localStorage 暫存資料的網頁時,暫存資料常會無故消失,沒法放過夜。 經此一事,學到冷知識 - IE 的「結束時刪除瀏覽歷程記錄」(而且有人選擇勾選),清除範圍包含 localStorage: 依據微軟文件: However, users can clea...

在傳統觀念,從網頁以新視窗或 IFrame 開啟外部網站連結,只要不隸屬同站台,瀏覽器基於同源政策(Same-Orgin Policy)會禁止外部站台以 JavaScrpit 存取來源網頁,理論上應該是安全的。但事實是,外部網頁仍有機會跨網站搞鬼。 用以下例子展示,假設我有兩個網頁,Home.htm...

依據這幾年的開發經驗,某些流程複雜但使用頻率不高的網頁操作流程,轉成下一步下一步的導引式操作(術語叫 Stepper)常能獲得使用者好評。 (補充:網頁介面依性質可粗分兩個方向:一種是使用人數不多但重度依賴,像是業務人員 Key 單,每天要重複輸入數百上千張,這種介面設計效率為王,常會將所有欄位集中...

在我的工具箱,Headless Chrome 已取代 PhatomJS 成為擷取網頁內容、自動測試及網頁擷圖/轉 PDF 的首選。 之前我都是自己寫程式呼叫 chrome.exe 傳參數執行各項任務,最近發現更方便的選擇。 Puppeteer Sharp 是 Github 上的開源專案,作者 Dar...