Category: javascript

3 1,472
繼續我的 HTML 文件檔計劃。封裝文件檔的另一項重點是把所有內容打包成單一 .html 檔 (高年級同學可能還記得 IE 時代有個 .mht，差不多的概念)，把要引用的第三方程式庫、CSS、圖檔都嵌進 .html 是較可行的做法，若包成 ZIP 閱讀時要在本機解壓縮，應該沒人能接受吧？網頁 HTM...

4 1,810
最近突發奇想，想將系統查詢結果嵌入網頁匯出成 .html，概念上像 Excel 或 Word 一樣是個文件檔，方便 Email 轉寄、歸檔保存，而採用網頁的好處是免裝軟體，用瀏覽器就能開啟，透過 JavaScript 可實現極佳的互動操作體驗。 但我馬上想到一個問題，針對機敏資料，Excel/Wor...

6 1,821
學會 CSS Flexbox 時超開心，以為人生從此不必再為佔滿剩餘網頁寬/高度煩惱，豈知還是會踩到小石頭。 有個需求是希望 IFrame/DIV 佔滿 TD 全部高度，IFrame/DIV 有設 height: 100%，但因父容器未指定高度時，不會發生效果。 用範例解說。table 透過 fle...

0 1,053
這些年在 JavaScript 處理 XML 的機會愈來愈少，但從事古蹟翻新與維護難免遇到。最近想為老系統增加一個編輯及檢視 XML 的小工具，有兩個小需求： 想讓 <textarea> 輸入的 XML 內容依標準縮排規則排版 提供可以展開、縮合 XML 節點的互動式 XML 檢視器 ...

5 2,920
分享一個 JavaScript 小技巧，假設有個很多項目的清單，靠 CSS overflow-y: scroll 啟用垂直捲軸，除了由使用者操作上下捲動，也能用程式控制捲動到指定的一筆嗎？ 用講的不容易理解，看示範就清楚吧! 在以下展示中，我用 div 當清單容器放入 16 個項目 div，清單高度...

0 7,620
隨著微軟擁抱開源，微軟官網出現 .NET/C# 以外的語言教學已不是新鮮事(之前就出過 Python 教學影片)，這回輪到 Vue.js 了! 如果你還不知道 Vue.js 是什麼，這裡簡單科普一下。 Vue.js 是當今(2022 年)的前端三大框架 - VAR (Vue.js、Angular、R...

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

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

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

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

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

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

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

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