Category: javascript

當心 setInterval 因瀏覽器節流模式嚴重失準

2021-09-27 10:28 PM

8,444

同事分享踩到的地雷一枚 - 某個用 setInterval 寫的閒置倒數功能(參考：ASP.NET 小技巧 - 防止 Session 逾時與網頁閒置偵測)，被發現超過時限很久還沒啟動。經過調查，問題發生在 Chrome 瀏覽器，操作使用者曾長期切到別的頁籤看其他網頁，並未一直停在網頁。後來查到，今...

前端單兵基本教練 - 使用 postMessage 與 IFrame 跨網站網頁互動

2021-07-30 07:20 PM

8,587

昨天講 Chrome 92 起禁止 IFrame 內嵌跨網站網頁 alert/confirm/prompt 一事時提到，IFrame 內嵌跨網站網頁時原本就有諸多限制，基於安全考量，禁止被內嵌的第三方網頁存取母網頁，也不允許母網頁存取第三方網頁的 DOM、JavaScript 物件，甚至想看一下 l...

Chrome/Edge 92 版起禁止跨網站 IFrame 呼叫 alert/confirm

2021-07-29 09:26 PM

8,440

同事分享一個 Chrome 92 版引發的新問題 - IFrame 內嵌的跨來源網頁將無法呼叫 alert/confirm/prompt。依據 Chrome 官方資料 - Feature: Remove alert(), confirm(), and prompt for cross origin...

前端單兵基本教練 - 徒手製作 AJAX 載入中遮罩

2021-07-12 06:34 AM

8,524

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

使用「我的最愛」在 IE 實現 VIP 專屬客製功能

2021-04-17 02:48 PM

1,536

開發網站有時會遇到一種狀況，某位使用者有個特殊需求，為一個人修改網頁設計正當性不足，但該功能確實可為他帶來可觀效益(我一直把增進人類全體之生活當成寫程式的核心價值呀)。因此，實務上偶爾會出現所謂 VIP 版，墮落自我要求不高的開發者會 Copy & Paste 改一版交差，認真精實的開發者會...

Git Diff 轉程式異動對照表(Compare List) - 互動版

2021-01-09 06:55 AM

1,498

前陣子分享將 Git diff 文件轉成網頁版程式異動對照表(Compare List)的做法，上路沒多久便觸礁。原因是一次新增大量檔案(例如：網站新增內容，包含大量 HTML、CSS、JS 檔全文)的 diff 檔可能超過 10MB，轉換產生的 HTML DOM 過於龐大讓瀏覽器很卡。Chrome...

【笨問題】JavaScript 的多行字串常數寫法

2020-12-07 09:43 PM

9,804

寫 JavaScript 遇到多行文字常數，我的直覺寫法是玩加號接接樂，像是這樣： <!DOCTYPE html> <html> <head> <style> fieldset { width: 17...

【茶包射手日記】jQuery.unique() 與用 JavaScript 排除重複陣列元素

2020-10-14 11:25 PM

4,901

接獲 Bug 通報，某網頁下拉選單出現重複選項，追查資料來自兩段 jQuery.map() 吐回字串陣列，以 Array.concat() 合併後再以 jQuery.unique() 排除重複項目，乍看合理。過去沒聽過有 jQuery.unique() 這個函式，但望文生義應類似 LINQ 的 Di...

JavaScript 檔壓縮工具 - UglifyJS

2020-07-08 07:35 PM

5,135

我有個特殊需求，需要一個壓縮(Minify) JavaScript 檔的指令列工具。JavaScript 壓縮工具多如牛毛，從線上轉換網站、Visual Studio 擴充套件，到 GUI 軟體工具都有，而 Gulp/Grunt 等打包工具也都有內建，由於每次只處理單一檔案，我希望安裝跟操作步驟愈簡...

關於 RegExp s (dotAll) 旗標

2020-07-07 11:25 PM

878

寫了以下程式碼，想用 JavaScript RegExp 從一串文字擷取指定 JSON 內容： <!DOCTYPE html> <html> <body> <textarea id="t" cols="60" ro...

取代單調 window.alert() 的好選擇 - SweetAlert2

2020-02-11 11:21 PM

23,515

嫌瀏覽器內建的 alert() / confirm() 太醜，Kendo UI 有 kendo.alert() 與 kendo.confirm() 可取代 window.alert()/confirm()，小缺點是標題列一律顯示網址難以調整，加上網頁未必就有引用 Kendo UI，為此下載龐大的 K...

【茶包射手日記】Libman 無法解析 jsDelivr/UNPKG 套件

2019-10-09 10:00 PM

1,609

我目前開發網頁主要還是用 Visual Studio，採取 ASP.NET MVC cshtml 產生 HTML 主體並搭上 jQuery/Vue.js 處理 MVVM 的策略，力求專案架構簡潔，避免扯上 npm、webpack 等重量級工具(除非是要寫 SPA)，走一種「輕前端風格」。既然採行這...

小把戲 - 讓 JSON.parse() 內建日期解析功能

2018-11-13 10:45 PM

3,543

JSON.parse 時另外指定 Reviver 函式將 "yyyy-MM-ddTHH:mm:ssZ" 轉成 Date 型別，已是我用 JavaScript 解析 JSON 字串的SOP。參考：我慣用的標準做法幾乎每次使用都要加工，一直抱怨為何瀏覽器不直接內建。先前寫 Knoc...

小技巧 - 運用 Form target 模擬 AJAX 表單傳送效果

2018-08-13 10:06 PM

6,711

先定義我所謂的「AJAX 表單傳送」：意指撰寫 JavaScript 蒐集 HTML 表單欄位，再藉由 XHR 傳送到伺服器端，取代傳統的 Postback。其優點包含送單時畫面不閃動、沒有重新載入網頁的延遲以及傳輸運算成本、表單處理失敗使用者輸入狀態不變方便修改重送... 等等，近年來 AJA...