2023-05-28 09:23 AM 3 1,472
繼續我的 HTML 文件檔計劃。封裝文件檔的另一項重點是把所有內容打包成單一 .html 檔 (高年級同學可能還記得 IE 時代有個 .mht,差不多的概念),把要引用的第三方程式庫、CSS、圖檔都嵌進 .html 是較可行的做法,若包成 ZIP 閱讀時要在本機解壓縮,應該沒人能接受吧?網頁 HTM...
2023-05-27 11:53 AM 4 1,810
最近突發奇想,想將系統查詢結果嵌入網頁匯出成 .html,概念上像 Excel 或 Word 一樣是個文件檔,方便 Email 轉寄、歸檔保存,而採用網頁的好處是免裝軟體,用瀏覽器就能開啟,透過 JavaScript 可實現極佳的互動操作體驗。 但我馬上想到一個問題,針對機敏資料,Excel/Wor...
2022-11-14 08:40 PM 6 1,821
學會 CSS Flexbox 時超開心,以為人生從此不必再為佔滿剩餘網頁寬/高度煩惱,豈知還是會踩到小石頭。 有個需求是希望 IFrame/DIV 佔滿 TD 全部高度,IFrame/DIV 有設 height: 100%,但因父容器未指定高度時,不會發生效果。 用範例解說。table 透過 fle...
2022-10-27 10:03 PM 0 1,053
這些年在 JavaScript 處理 XML 的機會愈來愈少,但從事古蹟翻新與維護難免遇到。最近想為老系統增加一個編輯及檢視 XML 的小工具,有兩個小需求: 想讓 <textarea> 輸入的 XML 內容依標準縮排規則排版 提供可以展開、縮合 XML 節點的互動式 XML 檢視器 ...
2022-10-04 09:39 PM 5 2,920
分享一個 JavaScript 小技巧,假設有個很多項目的清單,靠 CSS overflow-y: scroll 啟用垂直捲軸,除了由使用者操作上下捲動,也能用程式控制捲動到指定的一筆嗎? 用講的不容易理解,看示範就清楚吧! 在以下展示中,我用 div 當清單容器放入 16 個項目 div,清單高度...
2022-09-25 08:03 AM 0 7,620
隨著微軟擁抱開源,微軟官網出現 .NET/C# 以外的語言教學已不是新鮮事(之前就出過 Python 教學影片),這回輪到 Vue.js 了! 如果你還不知道 Vue.js 是什麼,這裡簡單科普一下。 Vue.js 是當今(2022 年)的前端三大框架 - VAR (Vue.js、Angular、R...
2022-09-24 12:05 PM 0 2,038
瀏覽器禁止跨站台 Cookie 傳送是老問題,尤以 IFrame 內嵌跨站台網頁最明顯,在 IE 時代還有「信任的網站」這招大絕,但隨著 IE 走入歷史,加上瀏覽器對於跨站台 Cookie 限制日趨嚴格,這類老寫法用起來愈來愈吃力。 先來簡單展示,假設有個設定及顯示 Cookie 的 cookie....
2022-09-21 08:42 PM 0 1,500
大部分的情況下,我們設計網頁只需關心可見元素在網頁文件(document.body)上的座標就好,不需要知道它在電腦螢幕的絕對座標,但有一種情況例外 - window.open(),傳入的 top 及 left 參數會以電腦螢幕為基準。 我有個冷門需求,想在指定元素下方用 window.open()...
2022-09-19 09:00 PM 0 1,650
寫網頁需要用 Regular Expression 在字串裡找特定關鍵字,發現 2022 年了,我還沒完全搞懂 RegExp.exec() 跟 String.match() / matchAll() 的用法及差異,趕緊做個練習壓壓驚。 用法說明都寫在註解,請直接看 Code ! <!DOCTY...
2022-09-12 08:45 PM 0 830
IE 從 IE9 開始支援 DOMParser,是解析 XML、HTML、SVG 的首選。 同事在 IE 用 DOMParser 處理 XML,硬生生踩到地雷。 用以下兩行程式即可重現問題: var xml="<rows><row><id>TEST1&l...
2022-07-26 09:45 PM 3 2,702
事發總有原因,這段程式與 IE 轉 Edge/Chrome 有關。 上回提到因為 Edge/Chrome 都支援用瀏覽器顯示 PDF,若在 window.open() 新開視窗用 <a target="_blank"> 開啟 PDF 連結,PDF 會開在底下瀏覽器的新...
2022-06-28 09:39 PM 0 2,077
這個系列是「將 IE-Only 網站翻修到 Chrome/Edge 相容」過程的瑣碎筆記,有參與古蹟維護的朋友請進。 接獲通報,某清嘉慶年間製造的 IE Only 欄位輸入介面,使用 Edge/Chrome 瀏覽會出現關不完的簽核 alert,我用以下網頁重現: <!DOCTYPE html&...
2022-06-24 09:12 PM 4 4,868
同事出的考題,滿是複雜 JavaScript 與 HTML 元素的古蹟網頁,有個全域變數固定在某個時間點被不明來源改成 undefined。(註:透過全域變數溝通非良好設計,但既為古蹟,一磚一瓦都有故事,還是盡量維持原貌吧。) 我用以下簡化範例重現問題: <!DOCTYPE html> ...
2022-05-16 10:13 PM 2 1,950
前陣子找到 JavaScript 快顯通知套件 - NOTY,雖然原作者已不再維護,但評估它最符合我的需求,如要修改也在我的能力範圍,維持原判。但接二連三有讀者提到,老朋友 SweetAlert2 其實就有定時自動關閉及其他快顯通知所需功能,有「眾裡尋他千百度,驀然回首,那人卻在燈火闌珊處」的驚喜感...
2022-05-14 07:55 AM 0 2,943
前幾天分享我找到好用的快顯通知套件 - NOTY,當時從一堆套件選中 NOTY,它只需一個 js 一個 css 搞定,甚至支援 IE10+,在 Github 上獲得超過 6700 顆星算是主流選擇之一,而簡便性與擴充性感覺不錯,最吸引我的點 - 不依賴 jQuery。雖然我一定會靠 jQuery 再...
2022-05-08 09:14 AM 5 3,611
當遇到狀況,網頁要顯示訊息的形式有很多種,最無腦最粗暴的做法是 alert(): 標題、位置、樣式沒得選,也談不上與網頁風格一致,但系統內建不必花腦筋,程式碼可中斷等使用者回應再繼續,用起來超簡單是它最大優點。 但如果你的網站要拿來換錢錢或分數,簡陋的 alert()/confirm() 很容易讓...