Category: html5

瀏覽器初到新網站時,會試著下載名為 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...

改版後托 Miniblog.Core 的福,部落格內建潮到出水的 PWA (Progressive Web App)支援,最近遇上 SSL 憑證更新,再學到 PWA / Service Worker 經驗一枚。 如下圖所示: 有個矛盾狀況:Chrome 顯示 SSL 憑證有效,但檢視內容憑證已於 ...

抓了開源專案 MiniBlog.Core 回來玩,想在其中套用 Form target 模擬 AJAX 表單傳送技巧時踢到鐵板,開啟 F12 偵錯工具後驚呼:天吶,這世界又變了! 新時代的 Postback 不再是單純送出一個 Request 拿回 HTTP 200,而是像這樣子: 如...

Chrome 自 59 版起內建了 Headless 模式,允許透過命令列啟動 Chrome 以無 GUI 方式執行,具備與正常開啟完全相同的網頁渲染及 JavaScript 引擎,還可透過網路連線遙控。這個功能可以用於不少有趣應用,這裡列舉幾種實用情境。 註:Headless Chrome ...