跨站台設定 Cookie 的另類解法 - window.open()
 |  | 0 |  | 3,409 |
瀏覽器禁止跨站台 Cookie 傳送是老問題，尤以 IFrame 內嵌跨站台網頁最明顯，在 IE 時代還有「信任的網站」這招大絕，但隨著 IE 走入歷史，加上瀏覽器對於跨站台 Cookie 限制日趨嚴格，這類老寫法用起來愈來愈吃力。 先來簡單展示，假設有個設定及顯示 Cookie 的 cookie....
JavaScript 另開新視窗定位技巧 - 開在指定元素位置與完整覆蓋原視窗
| | | 0 | | 3,356 |
大部分的情況下，我們設計網頁只需關心可見元素在網頁文件(document.body)上的座標就好，不需要知道它在電腦螢幕的絕對座標，但有一種情況例外 - window.open()，傳入的 top 及 left 參數會以電腦螢幕為基準。 我有個冷門需求，想在指定元素下方用 window.open()...
JavaScript RegExp.exec() 與 String.match() 練習
| | | 0 | | 2,373 |
寫網頁需要用 Regular Expression 在字串裡找特定關鍵字，發現 2022 年了，我還沒完全搞懂 RegExp.exec() 跟 String.match() / matchAll() 的用法及差異，趕緊做個練習壓壓驚。 用法說明都寫在註解，請直接看 Code ! <!DOCTY...
IE DOMParser F12 地雷
| | | 0 | | 1,137 |
IE 從 IE9 開始支援 DOMParser，是解析 XML、HTML、SVG 的首選。 同事在 IE 用 DOMParser 處理 XML，硬生生踩到地雷。 用以下兩行程式即可重現問題： var xml="<rows><row><id>TEST1&l...
程式範例 - 以全螢幕瀏覽器視窗檢視 PDF
| | | 3 | | 4,401 |
事發總有原因，這段程式與 IE 轉 Edge/Chrome 有關。 上回提到因為 Edge/Chrome 都支援用瀏覽器顯示 PDF，若在 window.open() 新開視窗用 <a target="_blank"> 開啟 PDF 連結，PDF 會開在底下瀏覽器的新...
IE 都更筆記 - alert 無窮迴圈
| | | 0 | | 2,787 |
這個系列是「將 IE-Only 網站翻修到 Chrome/Edge 相容」過程的瑣碎筆記，有參與古蹟維護的朋友請進。 接獲通報，某清嘉慶年間製造的 IE Only 欄位輸入介面，使用 Edge/Chrome 瀏覽會出現關不完的簽核 alert，我用以下網頁重現： <!DOCTYPE html&...
JavaScript 進階偵錯 - 抓出誰偷改變數？
| | | 4 | | 5,472 |
同事出的考題，滿是複雜 JavaScript 與 HTML 元素的古蹟網頁，有個全域變數固定在某個時間點被不明來源改成 undefined。(註：透過全域變數溝通非良好設計，但既為古蹟，一磚一瓦都有故事，還是盡量維持原貌吧。) 我用以下簡化範例重現問題： <!DOCTYPE html> ...
小試 SweetAlert2 快顯通知模式
| | | 2 | | 3,094 |
前陣子找到 JavaScript 快顯通知套件 - NOTY，雖然原作者已不再維護，但評估它最符合我的需求，如要修改也在我的能力範圍，維持原判。但接二連三有讀者提到，老朋友 SweetAlert2 其實就有定時自動關閉及其他快顯通知所需功能，有「眾裡尋他千百度，驀然回首，那人卻在燈火闌珊處」的驚喜感...
JavaScript 快顯通知 NOTY 在 Github 被標為過時，還能用嗎？
| | | 0 | | 3,223 |
前幾天分享我找到好用的快顯通知套件 - NOTY，當時從一堆套件選中 NOTY，它只需一個 js 一個 css 搞定，甚至支援 IE10+，在 Github 上獲得超過 6700 顆星算是主流選擇之一，而簡便性與擴充性感覺不錯，最吸引我的點 - 不依賴 jQuery。雖然我一定會靠 jQuery 再...
JavaScript 快顯通知套件 - NOTY
| | | 5 | | 4,778 |
當遇到狀況，網頁要顯示訊息的形式有很多種，最無腦最粗暴的做法是 alert()： 標題、位置、樣式沒得選，也談不上與網頁風格一致，但系統內建不必花腦筋，程式碼可中斷等使用者回應再繼續，用起來超簡單是它最大優點。 但如果你的網站要拿來換錢錢或分數，簡陋的 alert()/confirm() 很容易讓...
JavaScript 物件複製方法比較
| | | 0 | | 4,525 |
複製物件是 JavaScript 的實用技巧之一，十幾前我就學會用 jQuery.extend() 搞定，常見應用是結合參數預設值及函式傳入的設定值，例如： const defaults = { fontSize: '10pt', color: 'white', backgr...
JavaScript 鄉巴佬筆記 - ?. 運算子與物件屬性名簡寫
| | | 0 | | 3,690 |
自從宣告 IE 封印解除，我一改過去儘量用古老寫法以免惹 IE 生氣的保守心態，積極學習現代 JavaScript。猶如鄉巴佬進城，連看見自動販賣機也會大讚科技好進步。對專業前端開發人員來說，2022 年還在介紹這種基本常識簡直笑死，但心想「總有比我更晚解封的人」，還是拋開羞恥心(謎：不要提那種你沒...
IE 都更筆記 - 為 Chrome/Edge 加上 showModalDialog Polyfill
| | | 9 | | 5,882 |
隨著 IE 即將 EOS (野生 IE 將於 2022/6/15 滅絕，企業人工飼養 IE 則到 2029)，IE Only 網頁都更如火如荼。而 showModalDialog 問題也來到第三篇，足見這議題還挺煩人的。 先整理之前的研究心得： 汰換 showModalDialog() 嘗試用 I...
這些年，我錯過的 JavaScript 字串函數
| | | 2 | | 3,468 |
前幾天幫同事看問題，要在 JavaScript 偵測 location.href 是否為 / 字元結尾，看到 Visual Studio 自動提示了 endsWith() 函式，大驚! JavaScript 不知何時早已內建 startsWith、endsWith (Chrome 41 就有，目前版...
自學網頁的權威資源 - MDN Web Docs
| | | 0 | | 11,400 |
我猜蠻多人跟我一樣，從沒上過 HTML/JavaScript 的課，甚至連書都很少買，寫網頁全靠著邊做邊學，上網複製貼上程式查資料慢慢養成。坦白說這不是最有效率的學習方式，但似乎是大部分有程式經驗的人跨界網頁開發常用的做法，也不能說是不長進不積極，就只是走平凡人走的路罷了。 我自己目前常遇的狀況，是...
將 Word 內容直接轉成 GIGO 網頁輸入介面
| | | 0 | | 1,153 |
系統有張表單包含一個使用者自訂區塊，允許業務單位放入備註性質資料讓使用者填寫，該備註只對承辦人員有意義，與作業程序完全無關，且各單位所而內容不同，偶爾會調整。思考了一下，我打算將其視為黑盒子不解析內容，採 Garbage In Garbage Out 策略，是較省時省力的做法。但有個問題 - 備註內...