Category: JavaScript

瀏覽器禁止跨站台 Cookie 傳送是老問題,尤以 IFrame 內嵌跨站台網頁最明顯,在 IE 時代還有「信任的網站」這招大絕,但隨著 IE 走入歷史,加上瀏覽器對於跨站台 Cookie 限制日趨嚴格,這類老寫法用起來愈來愈吃力。 先來簡單展示,假設有個設定及顯示 Cookie 的 cookie....

寫網頁需要用 Regular Expression 在字串裡找特定關鍵字,發現 2022 年了,我還沒完全搞懂 RegExp.exec() 跟 String.match() / matchAll() 的用法及差異,趕緊做個練習壓壓驚。 用法說明都寫在註解,請直接看 Code ! <!DOCTY...

IE 從 IE9 開始支援 DOMParser,是解析 XML、HTML、SVG 的首選。 同事在 IE 用 DOMParser 處理 XML,硬生生踩到地雷。 用以下兩行程式即可重現問題: var xml="<rows><row><id>TEST1&l...

這個系列是「將 IE-Only 網站翻修到 Chrome/Edge 相容」過程的瑣碎筆記,有參與古蹟維護的朋友請進。 接獲通報,某清嘉慶年間製造的 IE Only 欄位輸入介面,使用 Edge/Chrome 瀏覽會出現關不完的簽核 alert,我用以下網頁重現: <!DOCTYPE html&...

同事出的考題,滿是複雜 JavaScript 與 HTML 元素的古蹟網頁,有個全域變數固定在某個時間點被不明來源改成 undefined。(註:透過全域變數溝通非良好設計,但既為古蹟,一磚一瓦都有故事,還是盡量維持原貌吧。) 我用以下簡化範例重現問題: <!DOCTYPE html> ...

前陣子找到 JavaScript 快顯通知套件 - NOTY,雖然原作者已不再維護,但評估它最符合我的需求,如要修改也在我的能力範圍,維持原判。但接二連三有讀者提到,老朋友 SweetAlert2 其實就有定時自動關閉及其他快顯通知所需功能,有「眾裡尋他千百度,驀然回首,那人卻在燈火闌珊處」的驚喜感...

前幾天分享我找到好用的快顯通知套件 - NOTY,當時從一堆套件選中 NOTY,它只需一個 js 一個 css 搞定,甚至支援 IE10+,在 Github 上獲得超過 6700 顆星算是主流選擇之一,而簡便性與擴充性感覺不錯,最吸引我的點 - 不依賴 jQuery。雖然我一定會靠 jQuery 再...

當遇到狀況,網頁要顯示訊息的形式有很多種,最無腦最粗暴的做法是 alert(): 標題、位置、樣式沒得選,也談不上與網頁風格一致,但系統內建不必花腦筋,程式碼可中斷等使用者回應再繼續,用起來超簡單是它最大優點。 但如果你的網站要拿來換錢錢或分數,簡陋的 alert()/confirm() 很容易讓...

複製物件是 JavaScript 的實用技巧之一,十幾前我就學會用 jQuery.extend() 搞定,常見應用是結合參數預設值及函式傳入的設定值,例如: const defaults = { fontSize: '10pt', color: 'white', backgr...

自從宣告 IE 封印解除,我一改過去儘量用古老寫法以免惹 IE 生氣的保守心態,積極學習現代 JavaScript。猶如鄉巴佬進城,連看見自動販賣機也會大讚科技好進步。對專業前端開發人員來說,2022 年還在介紹這種基本常識簡直笑死,但心想「總有比我更晚解封的人」,還是拋開羞恥心(謎:不要提那種你沒...

前幾天幫同事看問題,要在 JavaScript 偵測 location.href 是否為 / 字元結尾,看到 Visual Studio 自動提示了 endsWith() 函式,大驚! JavaScript 不知何時早已內建 startsWith、endsWith (Chrome 41 就有,目前版...

我猜蠻多人跟我一樣,從沒上過 HTML/JavaScript 的課,甚至連書都很少買,寫網頁全靠著邊做邊學,上網複製貼上程式查資料慢慢養成。坦白說這不是最有效率的學習方式,但似乎是大部分有程式經驗的人跨界網頁開發常用的做法,也不能說是不長進不積極,就只是走平凡人走的路罷了。 我自己目前常遇的狀況,是...

系統有張表單包含一個使用者自訂區塊,允許業務單位放入備註性質資料讓使用者填寫,該備註只對承辦人員有意義,與作業程序完全無關,且各單位所而內容不同,偶爾會調整。思考了一下,我打算將其視為黑盒子不解析內容,採 Garbage In Garbage Out 策略,是較省時省力的做法。但有個問題 - 備註內...